text-shadow必须加在<th>上而非<thead>或<tr>，因后两者不渲染文字；浅色背景用0 1px 1px rgba(0,0,0,0.15)，深色背景用0 -1px 1px rgba(255,255,255,0.3)。
text-shadow 必须加在 <th> 上，不是 <thead> 或 <tr> —— 后两者不渲染文字，加了也白加。
为什么text-shadow写在<thead>里没效果
text-shadow 只作用于实际绘制文本的元素。<thead> 和 <tr> 是容器节点，本身不输出任何字符；阴影只能附着在真正承载文字的 <th>（或 <td>）上。DevTools 里能看到样式声明存在，但 computed 值为空，就是这个原因。
- 常见错误：
thead { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }→ 完全无效 - 正确写法：
th { text-shadow: 0 1px 1px rgba(0,0,0,0.15); } - 如果表头用了
colspan或嵌套<span>，阴影仍要落在最外层<th>上，除非你明确想只给某段文字加效果
text-shadow参数怎么配才让表头“浮出来”不糊字
表头通常字号不大（14–16px）、背景色较浅，盲目套用标题参数会导致边缘发虚、可读性下降。关键不是加多厚，而是偏移方向+模糊尺度+颜色透明度三者匹配。
- 浅色背景（如
#f8f9fa）：用向下轻偏移模拟自然光，text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - 深色背景（如
#2c3e50）：换浅色高光，text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3); - 细字体（
font-weight: 300）慎用 >1px 的blur-radius，容易糊成一团 - 避免
text-shadow: 0 0 5px #000这类无偏移+高模糊写法——文字轮廓消失，只剩一团灰影
和:hover联动时最容易卡住的三个点
想悬停时增强表头辨识度，别只堆阴影强度，过渡节奏和协同变化更重要。
立即学习“前端免费学习笔记（深入）”；
- 过渡必须加在
th上：th { transition: text-shadow 0.2s ease; } -
th:hover里只改text-shadow，别同时突变color—— 否则阴影会“跳”而不是平滑浮现 - 移动端没
:hover，要用:active或 JS 临时加 class 控制；iOS Safari 对叠加 >2 层阴影 + 高模糊值（>2px）滚动时可能掉帧
真正难的不是写对语法，而是每种背景色下都要手动调参：偏移方向是否贴合光照逻辑、模糊值是否在小字号下保持锐利、透明度是否足够让文字从背景里“浮出来”又不抢戏——这些没法靠一套通用值解决，得实机测、逐列调。
