text-shadow 是唯一正解，box-shadow 对文字无效；参数必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序书写，缺一不可，顺序错误或缺色则整条声明被忽略。
text-shadow 是唯一正解，别碰 box-shadow——后者对文字无效，只会让阴影错位或发虚。
text-shadow 参数顺序写错就完全不生效
浏览器不会报错，而是整条声明直接忽略。必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序书写，缺一不可：
-
text-shadow: 2px 2px #000;✅（省略blur-radius，默认为 0） -
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);✅（完整四参数） -
text-shadow: #000 2px 2px;❌（颜色提前，整条失效） -
text-shadow: 2px #000 2px;❌（顺序混乱，无效） -
text-shadow: 2px 2px 0;❌（没颜色，等价于未定义）
写了却看不见？先查这四个地方
90% 的“没效果”不是语法问题，而是被意外拦截：
- 父容器设了
overflow: hidden，而阴影（尤其大blur-radius或负偏移）超出边界被裁掉 - 文字颜色是
color: transparent或rgba(0,0,0,0)——text-shadow 依赖文字内容作为载体，没颜色就没阴影 - 用了
-webkit-font-smoothing: antialiased，在 macOS Safari 下会显著削弱阴影对比度 - 伪元素（如
::before）里用content插入文字，但忘了给该伪元素单独加text-shadow
中文和小字号要特别小心模糊半径
中文字体笔画密、结构重，盲目套用英文参数容易糊成一团：
- 12px 及以下字体，
blur-radius超过2px就可能发虚；建议控制在1px内 - 标题（≥32px）可用到
6px，但 iOS Safari 对 >12px 渲染不稳定，慎用 - 深色背景配浅色阴影：
text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅色背景配深色阴影：
text-shadow: 0 0 4px rgba(0,0,0,0.4); - 别用纯黑/纯白——
#000在深底上几乎不可见，#fff在白底上等于没写
多层叠加才出立体感，但别超三层
单层只能出浮雕或发光，真立体需 3 层以上，按「高光 → 主影 → 深影」顺序写：
text-shadow: 0 -1px 1px #fff, 1px 1px 2px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.2);- 前层在视觉上更“近”，所以高光放最前，深影放最后
- 移动端 Safari（iOS 15–16）渲染超过 4 层时可能出现掉帧，优先砍到 3 层
- 每层的
h-offset、v-offset、blur-radius、color必须形成可信的光路逻辑——调完记得关灯看一眼，阴影方向是不是统一朝右下？
真正麻烦的是同一组 text-shadow 值，在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍，得实机多测，不能只看开发机效果。
