必须写在<th>上，因为text-shadow只作用于实际渲染文本的元素，而<thead>和<tr>是容器节点不绘制文字；<th>作为承载表头文本的单元格，天然支持该属性且无需额外包裹。
直接给 <th> 元素加 text-shadow 就能提升辨识度，不用改表格结构、不依赖 JS、也不需要包裹层。
为什么必须写在 <th> 上，而不是 <thead> 或 <tr>
text-shadow 只作用于实际渲染文本的元素。<thead> 和 <tr> 是容器节点，不直接绘制文字；阴影加在它们身上根本不会生效。只有 <th>（和 <td>）承载了表头文本，是唯一正确的锚点。
- 常见错误：把样式写成
thead { text-shadow: ... }→ 完全无效 -
<th>默认是display: table-cell，天然支持所有文本样式，包括text-shadow - 别试图用伪元素或额外
<span>包裹——纯属冗余，增加 DOM 深度且无收益
text-shadow 参数怎么配才不糊字又提神
参数顺序错、模糊半径过大、偏移为 0，都会让文字变虚或看不出效果。核心原则是：轻量、有方向、适配背景。
- 浅色背景（如
#f8f9fa）推荐：text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15)——只向下偏移，模拟自然光，不抢戏 - 深色背景（如
#1a1a1a）换浅色高光：text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) - 避免
text-shadow: 0 0 5px #000这类无偏移+高模糊写法，边缘晕开、可读性暴跌 - 细字体（
font-weight: 300）慎用 >2px 的blur-radius，容易糊成一团
和 hover 状态联动时最容易踩的坑
想让鼠标悬停时表头更醒目？关键不是加多强的阴影，而是过渡是否平滑、是否与颜色变化协同。
立即学习“前端免费学习笔记（深入）”；
- 过渡必须加在
<th>上：th { transition: text-shadow 0.2s ease; } -
th:hover里只改text-shadow，别同时突变color——否则阴影会“跳” - 移动端没
:hover，要用:active或 JS 添加临时 class 控制阴影强度 - 别在
:hover里堆叠 4 层以上阴影，iOS Safari 滚动时可能掉帧
真正难的不是写对语法，而是意识到：阴影不是越重越好，而是要让文字从背景里“浮出来”——这取决于偏移方向、模糊尺度、颜色透明度三者的微妙平衡，且每种背景色都需要单独调试。
