text-shadow必须包含水平偏移、垂直偏移、模糊半径三值，颜色可选但建议显式声明；多层叠加可实现发光或立体效果，但需控制层数≤4、总模糊≤20px，并注意真机兼容性与性能。
text-shadow 基础写法：三个参数缺一不可
写 text-shadow 时漏掉任意一个值，整个声明就失效——浏览器不会报错，但字也不会发光。它必须是「水平偏移、垂直偏移、模糊半径」三者齐全，颜色可选但建议显式写出。
常见错误现象：text-shadow: 0 0 5px; 看起来没效果，其实是缺了颜色；text-shadow: #fff 5px 5px; 缺模糊半径，结果只是位移，不是“发光”。
-
text-shadow: 2px 2px 4px #000;→ 最小可用组合，产生基础投影 - 想发光？模糊半径至少设为
3px起，0或1px几乎看不出 - 多层叠加用逗号分隔：
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #0077ff;
实现发光字：靠多层同位置高斯模糊堆叠
单层 text-shadow 只能模拟简单投影，真·发光得靠 3–4 层相同偏移、递增模糊、渐变颜色的叠加。原理是浏览器对每层分别做高斯模糊再合成，视觉上形成光晕扩散感。
使用场景：按钮悬停、标题强调、加载中文字提示。别在正文段落里滥用，渲染开销会上升，尤其在低端 Android WebView 中容易卡顿。
立即学习“前端免费学习笔记（深入）”；
- 安全起见，控制总层数 ≤ 4，模糊半径总和 ≤ 20px
- 避免用
rgba(255,255,255,0.8)这类半透色堆叠，容易发灰；改用纯色 + 降低每层透明度更可控 - 示例发光（蓝白渐进）：
text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #0077ff, 0 0 16px #0077ff;
伪造立体字：上下两层反向阴影 + 背景色配合
所谓“立体”，本质是顶部加浅色上阴影、底部加深色下阴影，再配深色文字本身，形成明暗交界。关键不是层数多，而是方向与对比度要准。
容易踩的坑：只加一层深色下阴影（如 0 2px 0 #333），结果像脏边而不是立体；或上下阴影颜色太近，完全看不出层次。
- 推荐组合：
text-shadow: 0 -1px 0 #fff, 0 1px 0 #333;（注意无模糊，值为0） - 文字颜色必须比下阴影亮、比上阴影暗，例如
color: #666; - 若背景非纯白，上阴影颜色需匹配背景，否则会露白边
兼容性与性能提醒：iOS Safari 和旧版 Chrome 的隐性限制
text-shadow 在所有现代浏览器都支持，但有两个真实存在的限制常被忽略：一是 iOS Safari 对超过 5 层的叠加会截断渲染（只画前 5 层）；二是某些安卓 6–8 的系统 WebView 对模糊半径 > 15px 的表现极不稳定，可能直接不渲染。
性能影响比想象中明显：当文字频繁重绘（如配合 transform 动画或滚动视差），每多一层 text-shadow 都会触发额外的合成层，GPU 内存占用翻倍增长。
- 上线前务必在真机（尤其是 iPhone SE 第二代、Redmi Note 9）上验证多层效果
- 动画中用
text-shadow，优先降级为单层 +opacity变化，比动态改 shadow 更稳 - 不要试图用
text-shadow模拟描边——那是-webkit-text-stroke的活，混用反而出错
最麻烦的不是写不对，是写对了但在某个机型上静默失效。多层、大模糊、深色背景——这三者凑一起时，永远先测真机，别信模拟器。
