text-shadow 四参数顺序为水平偏移、垂直偏移、模糊半径、颜色；多层用逗号分隔，从左到右绘制；IE9不支持，iOS6–7仅取首层；大模糊+大偏移易糊字，小字号慎用>2px模糊；性能敏感场景优先用filter:drop-shadow()。
text-shadow 的基本写法和参数顺序
直接写 text-shadow 时，四个值的顺序不能错：水平偏移、垂直偏移、模糊半径、颜色。漏掉模糊半径或颜色会导致整条声明失效。
- 水平偏移为正数：阴影往右；负数则往左
- 垂直偏移为正数：阴影往下；负数则往上（注意不是“向上偏移”，是“阴影出现在文字上方”）
- 模糊半径可以为
0，此时是清晰边缘的投影；设为负数无效，会被浏览器忽略 - 颜色不写默认是当前文字色，但强烈建议显式写出，避免继承干扰
比如：text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
多层阴影怎么叠加才不糊成一团
多个 text-shadow 值用逗号分隔，浏览器从左到右逐层绘制。顺序反了，后画的会盖住先画的，容易让效果变脏或看不出层次。
- 想做“外发光+内凹”效果，先写远距离模糊阴影（外光），再写小偏移高对比阴影（模拟受光面）
- 避免同时用大模糊 + 大偏移，比如
10px 10px 20px #000，在小字号下几乎看不到字形 - 移动端慎用 >8px 的模糊半径，部分低端 Android 浏览器渲染卡顿或直接降级
示例（立体感文字）：text-shadow: 0 2px 4px rgba(0,0,0,0.2), -1px -1px 2px rgba(255,255,255,0.5);
IE 和旧版 Safari 对 text-shadow 的兼容性坑
text-shadow 在 IE10+ 才开始支持，IE9 及以下完全不识别；iOS 6–7 的 Safari 不支持多层阴影，只取第一个值。
- 如果项目必须兼容 IE9，别指望
text-shadow，改用伪元素 +transform: translate()模拟 - 使用
rgba()颜色时，IE9 虽支持text-shadow，但不支持rgba()作为其颜色值，得 fallback 到hex或rgb() - 某些安卓 WebView（如 UC 内核）对负模糊半径报错，哪怕只是写了个
-1px，整个声明就静默失效
安全写法（兼顾老环境）：text-shadow: 1px 1px 2px #333, 0 0 4px rgba(0,0,0,0.1); —— 第一层保底，第二层增强
性能敏感场景下 text-shadow 的隐性开销
看起来只是加个影子，但每帧重绘时，浏览器要为每个带 text-shadow 的文本节点额外做一次高斯模糊计算。滚动区域里大量使用，尤其配合 will-change: transform 时，GPU 内存占用会明显上升。
- 动画中频繁修改
text-shadow的值（比如 hover 时动态改模糊半径），比改color或font-size更伤性能 - 用在
position: fixed的标题上问题不大；但用在每行都有的列表项里，尤其是虚拟滚动未启用时，滑动卡顿概率陡增 - 字体特别小时（
12px以下），模糊半径超过2px就可能让文字边缘发虚，用户感知为“显示不清”，而非“有阴影”
真要动效，优先考虑用 filter: drop-shadow() 替代，它走 GPU 加速路径，但注意它作用于整个元素盒，不是纯文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
