text-shadow必须按“水平偏移、垂直偏移、模糊半径、颜色”顺序书写，缺一不可；支持多层逗号分隔，但需平衡偏移与模糊以保可读性；iOS低功耗模式可能禁用模糊，高频重绘区域慎用。
text-shadow 的基本写法和参数顺序
text-shadow 必须按「水平偏移、垂直偏移、模糊半径、颜色」顺序写，少一个值都可能失效。比如 text-shadow: 2px 2px 4px #000; 是合法的；但漏掉模糊半径（如 text-shadow: 2px 2px #000;）在旧版 Safari 会直接忽略整条规则。
- 水平偏移和垂直偏移不能省略，且必须带单位（
px、em、rem都行） - 模糊半径可为
0，此时没有柔边效果，只产生锐利投影 - 颜色支持所有 CSS 颜色值：十六进制、
rgb()、hsla()、甚至transparent
多层阴影叠加的真实用途和常见翻车点
单个 text-shadow 可以写多个值，用逗号分隔，实现立体感或描边效果。但很多人以为“多写几层=更厚”，结果文字发虚、性能掉帧。
- 多层阴影不是简单堆叠数值，而是逐层渲染：第一层最靠近文字，最后一层最远
- 常见错误是模糊半径过大（比如全设成
8px），导致文字边缘被严重侵蚀，尤其小字号下几乎不可读 - 真实用法举例：模拟描边（
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;），注意这里模糊半径是0，否则描边会糊
兼容性和性能影响：哪些场景要特别小心
text-shadow 在 IE9+ 和所有现代浏览器都支持，但有两处容易被忽略：
- iOS Safari 在低功耗模式下可能禁用模糊渲染，导致阴影变硬或消失，别依赖它做关键视觉传达
- 高频重绘区域（如滚动中带阴影的标题栏、动画中的文字）会触发 GPU 合成，低端安卓机可能出现卡顿
- 使用
will-change: text-shadow不仅无效，还可能引发渲染异常，别加
真正影响质感的不是层数多少，而是偏移与模糊的平衡——多数情况，一层带 1–2px 模糊的阴影，比三层 4px 模糊更干净。小字号文字慎用模糊，大标题才适合玩层次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
