直接给 <th> 元素加 text-shadow 即可，因其是文本渲染层属性，不参与布局计算且 <th> 默认支持所有文本样式，无需修改表格结构或包裹层。
直接给 <th> 元素加 text-shadow 就行，不需要动表格结构或包裹层。
为什么不用改 table 或 div？
text-shadow 是作用于文本渲染层的独立属性，和盒模型、border-collapse、overflow 都无关。它只管文字怎么“画出来”，不参与布局计算，也不受表格特殊渲染限制。
-
<th>是普通内联元素（默认display: table-cell），支持所有文本样式，包括text-shadow - 不像
box-shadow会受<table>的盒模型行为干扰，text-shadow没有兼容性陷阱 - 加在
<th>上，阴影只出现在表头文字上，不会误染到数据行或边框
text-shadow 参数怎么配才自然？
常见错误是模糊半径太大导致字迹发虚，或偏移量为 0 让阴影“叠在字上”看不出效果。推荐从轻量级组合起步：
-
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);—— 微偏右下，轻微模糊，适合浅色背景 -
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);—— 只向下偏移，模拟自然光感，最不易抢戏 - 深色背景时换浅色阴影：
text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3); - 避免用
text-shadow: 0 0 5px #000;这类无偏移+高模糊，容易让文字边缘晕开、可读性下降
和 hover 或 active 状态联动要注意什么？
如果想在鼠标悬停时增强表头阴影，得注意两点：一是过渡必须加在 <th> 上，二是避免和字体颜色变化冲突。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
th { text-shadow: 0 1px 1px rgba(0,0,0,0.15); transition: text-shadow 0.2s ease; } th:hover { text-shadow: 0 2px 4px rgba(0,0,0,0.3); } - 别在
:hover里同时改color和text-shadow且没设过渡——颜色突变会让阴影跳变明显 - 移动端无 hover，若需点击反馈，建议用
:active或 JS 添加临时 class 控制阴影强度
真正要小心的不是语法，而是把 text-shadow 错加到 <thead> 或 <tr> 上——那根本不会生效，因为它们不渲染文字；阴影必须落在实际承载文本的元素上，也就是 <th> 或 <td>。
