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