text-shadow语法顺序错误会导致整条声明被忽略；必须严格遵循“水平偏移、垂直偏移、模糊半径（可选）、颜色”顺序，且多层阴影用逗号分隔。
text-shadow 语法顺序写错就完全失效
浏览器对 text-shadow 的参数顺序极其严格，写错一个位置整条声明会被忽略——不是“部分生效”，而是直接当不存在。常见错误是把颜色提前，比如 text-shadow: #000 2px 2px; 或 text-shadow: 2px #000 2px;，这两种都无效。
合法组合只有这几种：
-
text-shadow: 2px 2px #000;（省略模糊半径，默认为 0） -
text-shadow: 2px 2px 4px #000;（完整四参数） -
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;（多层，逗号分隔）
前两个参数（水平/垂直偏移）必须存在且带单位；模糊半径可省略，但若出现就必须在颜色之前；颜色必须是最后一个值。
明明写了 text-shadow 却看不到？先查这四个地方
90% 的“没效果”不是语法问题，而是渲染被意外拦截：
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
overflow: hidden，而阴影超出边界被裁掉（尤其用大blur-radius或负偏移时） - 文字本身颜色是
transparent或rgba(0,0,0,0)——text-shadow不是独立图层，它依附于文字内容，内容不可见，阴影自然也不见 - 用了
-webkit-font-smoothing: antialiased，在 macOS Safari 下会显著削弱阴影对比度 - 在伪元素
::before/::after里用content插入文字，但忘了给该伪元素单独加text-shadow
小字号文字加阴影容易糊成一团
12px 及以下字体加 >2px 的 blur-radius，视觉上会严重发虚，甚至影响可读性。这不是 bug，是渲染原理决定的：
- 小字号像素密度高，模糊半径稍大就会覆盖相邻笔画
- 移动端 iOS Safari 对
blur-radius > 12px渲染不稳定，建议控制在 3px 内（标题可用到 5px） - 要实现“描边”效果，别依赖单层模糊阴影；用四方向 0 模糊的
text-shadow拼合更可靠：text-shadow: -1px 0 0 #000, 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000;
别和 box-shadow 混着用，尤其在按钮上
text-shadow 和 box-shadow 作用对象完全不同，叠加后容易过重或发虚：
-
text-shadow只作用于文字内容，不支持spread参数 -
box-shadow作用于整个盒模型，适合卡片、模态框等容器级投影 - 给
<button>同时加两种阴影时，先关掉text-shadow，确认box-shadow是否已满足层次感；若还需文字提亮，再加一层极轻的text-shadow: 1px 1px 1px rgba(0,0,0,0.1); - 大量文字做 hover 动画时，
text-shadow不触发硬件加速，卡顿风险比box-shadow + transition高得多
真正麻烦的是深色模式、字体抗锯齿、CSS 自定义属性联动时的表现差异——这些没法靠改一行代码解决，得在真机上逐个测。
