text-shadow 四个参数顺序为水平偏移、垂直偏移、模糊半径、颜色，前两者必带单位（0除外），模糊半径不可省略，多层用逗号分隔；失效主因是父元素遮挡、透明度影响或浏览器兼容问题。
text-shadow 的基本写法和参数顺序
直接写 text-shadow 时，四个值的顺序不能错：水平偏移、垂直偏移、模糊半径、颜色。漏掉模糊半径或颜色会整个失效。
- 前两个值（如
2px -1px）必须带单位，0可不带单位 - 第三个值（模糊半径）可为
0，但不能省略；设为0就是锐利边缘阴影 - 颜色支持所有 CSS 颜色写法：
#333、rgba(0,0,0,0.5)、transparent都合法 - 多个阴影用逗号分隔，比如给文字加「外发光 + 下压」效果：
text-shadow: 0 0 8px #fff, 0 2px 4px rgba(0,0,0,0.3);
常见失效原因：父元素遮挡或透明度干扰
写了 text-shadow 却看不到？大概率不是语法错，而是被其他样式盖住了。
- 父容器设置了
overflow: hidden，而阴影超出边界——把父元素padding加大或改用clip-path: none - 文字本身用了
opacity: 0.9或rgba()颜色，会导致阴影也变淡；想保持阴影强度，改用color: black+background: rgba()分离控制 - 用了
backdrop-filter或transform的元素，某些浏览器（尤其是 Safari）会裁剪掉阴影，加isolation: isolate强制图层提升
性能敏感场景下慎用大模糊值
text-shadow 的模糊计算是实时的，尤其在动画或滚动中，blur 超过 10px 容易掉帧。
- 移动端 Webview 或低配 Android 设备上，
text-shadow: 0 0 12px #000可能导致文字渲染延迟甚至闪烁 - 替代方案：用伪元素 +
filter: blur()控制更精细，且可硬件加速；但注意伪元素需设置content: ""和定位 - 真正需要强发光效果时，优先考虑 SVG 文字或导出为图片，而不是堆叠多层
text-shadow
IE 和旧版 Safari 对多层阴影的支持差异
IE10+ 支持单层 text-shadow，但不支持逗号分隔的多层；Safari 9–12 在 transform 容器里会丢弃第二层以后的阴影。
立即学习“前端免费学习笔记（深入）”；
- 兼容性兜底：用
@supports (text-shadow: 0 0 0 #000)做特性检测，而非用户代理判断 - 不要依赖多层阴影做关键视觉传达，比如「必填标识」或错误提示文字，否则 IE 用户可能完全看不到
- Safari 旧版本中，如果父元素有
will-change: transform，text-shadow可能彻底消失——临时去掉该声明或换用translateZ(0)
#000 在黑色背景上就没了，得配合 color-scheme 或 CSS 自定义属性动态更新。 
