text-shadow生效需严格遵循语法顺序、避免背景干扰、适配小字号与多端差异：参数错序或缺颜色即失效；渐变背景宜用四方向描边或背景裁剪；移动端小字号控制模糊值；伪元素需单独设阴影；父容器overflow可能裁剪阴影。
直接改 text-shadow 的值就能生效，但多数人改了没效果，不是语法错，而是被背景、透明度或父容器悄悄拦住了。
text-shadow 语法顺序写错就完全不渲染
浏览器对参数顺序极其敏感，错一个位置整条声明就静默失效：
-
text-shadow: 2px 2px 4px rgba(0,0,0,0.3)✅（标准四参数） -
text-shadow: 2px 2px #000✅（省略blur-radius，默认为 0） -
text-shadow: #000 2px 2px❌（颜色提前，整条丢弃） -
text-shadow: 2px 2px 0❌（缺颜色，等价于未定义）
别依赖开发者工具里“看起来生效了”——要真在按钮上看见阴影，才叫有效。
渐变背景按钮上文字阴影常失效，得换思路
单层 text-shadow: 0 0 2px rgba(0,0,0,0.5) 在线性渐变（如 linear-gradient(135deg, #4a148c, #1976d2)）上大概率看不见，因为中间过渡区既不深也不浅，阴影无处锚定。
立即学习“前端免费学习笔记（深入）”；
- 用四方向描边式写法：
text-shadow: -1px -1px 0 rgba(0,0,0,0.3), 1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3), 1px 1px 0 rgba(0,0,0,0.3) - 或者切断文字与背景耦合：
-webkit-background-clip: text+-webkit-text-fill-color: transparent，再配一层text-shadow: 0 0 4px rgba(0,0,0,0.6) - 禁用
filter: drop-shadow()替代方案——它作用于整个按钮盒，会把边框也糊掉
移动端和小字号文字要特别控参
12px 及以下中文字体，blur-radius 超过 2px 就容易发虚；iOS Safari 对 >12px 模糊值渲染不稳定。
- 小字号按钮建议用
text-shadow: 0 1px 1px rgba(0,0,0,0.25)，偏移小、模糊轻 - 深色背景配浅字时，高光层（如
-1px -1px 0 #fff）透明度别超0.6，否则边缘过曝 - 检查是否误开了
-webkit-font-smoothing: antialiased，macOS Safari 下它会显著削弱阴影对比度
伪元素或透明文字导致阴影消失
如果按钮文字是靠 ::before 插入的，或用了 color: transparent，text-shadow 就不会出现——它必须有可渲染的文字内容作为载体。
- 伪元素需单独加
text-shadow，不能继承父级 -
-webkit-text-fill-color: transparent是安全的，但必须确保text-shadow颜色不为transparent - 父容器设了
overflow: hidden且阴影偏移较大（如-4px -4px），会被裁掉，肉眼看不见
最麻烦的是同一组参数在 Windows 高分屏和 macOS Retina 屏上视觉重量差一倍，实机点开调试器调，别信模拟器预览。
