text-shadow在<th>上易失效因表格渲染环境拥挤：overflow:hidden或table-layout:fixed裁剪阴影、小字号融笔画、浅背景降低对比度、伪元素无阴影载体；应禁用blur-radius，用硬边偏移组合，并排查DOM结构与跨浏览器差异。
text-shadow 能给表格表头（<th>）加阴影，但直接套用通用参数大概率糊成一团或根本看不见——中文表头、小字号、紧凑单元格这三者叠加，会让默认的 2px 2px 4px #000 失效。
为什么 <th> 上的 text-shadow 容易失效
不是语法错了，而是表头渲染环境太“挤”：
- 多数表格默认
overflow: hidden或table-layout: fixed，大一点的blur-radius直接被裁掉 -
<th>常设font-size: 14px或更小，blur-radius > 1px就开始融笔画 - 背景常是浅灰或渐变，
#000阴影在深色区域对比度崩塌，#fff在白底上等于没写 - 伪元素（如
::before插入图标）没单独加text-shadow，文字载体没了，阴影自然消失
<th> 专用 text-shadow 参数组合
避开模糊半径陷阱，用偏移+硬边模拟层次感：
- 基础可读型（推荐默认）：
text-shadow: 1px 1px 0 rgba(0,0,0,0.15)—— 仅 1px 偏移，0 模糊，极轻压暗，不糊字 - 深色背景表头：
text-shadow: -1px -1px 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(0,0,0,0.1)—— 双向硬边，造出微浮雕感 - 需要描边效果（比如白字配深灰背景）：
text-shadow: -1px 0 0 #000, 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000—— 四方向 0 模糊，边缘干净 - 禁用所有模糊值：只要出现
blur-radius，必须带单位（0px或0），写成text-shadow: 1px 1px 0 #000才生效；text-shadow: 1px 1px #000也合法，但浏览器自动设模糊为 0
别漏掉这三处 DOM 结构陷阱
<th> 不是孤立存在，它的父级和兄弟节点会悄悄吃掉阴影：
立即学习“前端免费学习笔记（深入）”；
- 检查
<table>或<thead>是否设了overflow: hidden或clip-path—— 临时加outline: 1px solid red看实际渲染边界 - 如果
<th>内用了display: flex或position: relative，阴影可能被层叠上下文截断，加z-index: 1未必有用，优先改布局 - 响应式表格里
<th>字体缩到12px以下时，立刻切回text-shadow: 0 0 0 #000或干脆关掉 —— 此时阴影已非增强，而是干扰
真正麻烦的是同一套 text-shadow 在 Chrome 和 Safari 下视觉重量差一倍，尤其 macOS Retina 屏 + -webkit-font-smoothing: antialiased 组合，会让阴影发灰变淡。实机预览比 DevTools 里的预览可靠得多。
