text-shadow语法顺序必须为水平偏移、垂直偏移、模糊半径、颜色，错序则整条声明被忽略；支持多层逗号分隔，模糊半径不可为负，0值产生硬边描边效果，IE9以下不支持。
text-shadow语法顺序不能错：水平偏移、垂直偏移、模糊半径、颜色
写错顺序，整个声明会被浏览器直接忽略。比如 text-shadow: rgba(0,0,0,0.2) 1px 1px 2px; 是无效的——颜色必须放在最后。正确写法是 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);。
水平偏移为负值（如 -1px）时阴影往左；垂直偏移为负值（如 -1px）时往上。这在做“提亮深色文字”或模拟内凹效果时很关键。
模糊半径不能为负数；设为 0 就是硬边阴影，适合描边；大于 0 才有柔化效果，但超过 10px 在低端设备上可能触发渲染卡顿。
多层阴影用逗号分隔，漏掉一个逗号就只生效第一组
常见错误是写成 text-shadow: 1px 1px 1px #000 2px 2px 2px #333;——中间缺逗号，浏览器只认前四值，后三值被丢弃。正确写法必须带逗号：text-shadow: 1px 1px 1px #000, 2px 2px 2px #333;。
立即学习“前端免费学习笔记（深入）”；
两层足够应对大多数场景：
- 第一层：紧贴文字轮廓，比如
0 0 0 #000（无偏移无模糊，压实边缘） - 第二层：轻微偏移+柔和模糊，比如
1px 1px 2px rgba(0,0,0,0.2)（增强立体感）
超过三层不仅难维护，还会在 iOS Safari 或旧版 Chrome 中出现渲染异常，尤其配合 transform: scale() 时容易糊边。
text-shadow失效的三个高频原因
文字没阴影？先盯住这几个点：
-
overflow: hidden或clip-path把阴影裁掉了——检查父容器是否限制了渲染区域 - 文字颜色和阴影颜色太接近，比如白字配
rgb(245,245,245)，几乎看不出区别 - 用了
text-rendering: optimizeLegibility，某些 Chromium 版本会弱化甚至跳过阴影绘制
IE9 及以下不支持 text-shadow，但 IE10+ 原生支持，无需前缀。如果项目还要兼容 IE9，得用 filter: glow() 降级，不过那属于另一套机制了。
在复杂背景上提升可读性，别只调 color 或 font-weight
图片背景、渐变背景、半透明白底容器（background: rgba(255,255,255,0.8)）里放浅灰文字，光加粗或换深色往往不够——阴影才是更可控的补救手段。
推荐组合：text-shadow: -1px -1px 1px rgba(255,255,255,0.3), 1px 1px 1px rgba(0,0,0,0.2);
这种上下左右各一层的微偏移，能绕开锯齿问题，对小字号 + 非 Retina 屏特别友好。真正难搞的是斜体+12px+Windows 渲染下的毛边，这时候与其硬调 text-shadow，不如换字体或加 font-smooth: antialiased。
