text-shadow多层叠加必须从外到内书写，即最模糊、最外扩的阴影写在最前，最锐利、最贴近文字的写在最后；所有层offset必须为0 0，仅通过递增blur-radius和明度递减的颜色实现霓虹层次。
text-shadow 多层叠加的写法和顺序规则
霓虹灯效果本质是用 text-shadow 模拟多层发光，关键不是层数越多越好，而是外层模糊半径要大于内层，且颜色从亮到暗逐层扩散。浏览器按声明顺序从下往上渲染阴影，所以必须把最外围、最模糊的阴影写在最前面，最靠近文字、最锐利的写在最后。
- 错误写法：
text-shadow: 0 0 2px #fff, 0 0 5px #0ff;（后一层会盖住前一层，视觉上只剩最亮那层） - 正确顺序：
text-shadow: 0 0 15px #0ff, 0 0 10px #0ff, 0 0 5px #0ff, 0 0 2px #fff; - 所有偏移量保持
0 0，只调模糊半径和颜色，否则会出现“拖影”而非“发光”
如何选色和控制亮度层次
纯色霓虹（比如青色）容易发灰，真正有质感的发光需要明度递减+轻微色相偏移。比如蓝紫系霓虹，外层用高饱和亮色，内层加白提亮，再加一层极细高光。
- 推荐组合（青霓虹）：
text-shadow: 0 0 20px #00e6ff, 0 0 15px #00aaff, 0 0 10px #0077cc, 0 0 4px #ffffff; - 避免使用
#000或过暗色做外层，会导致发光被“吃掉”；也不要用rgba()透明色，半透明叠加会削弱强度 - 如果文字背景非纯黑，外层阴影颜色要略带背景色倾向（如深灰背景配
#aaa最外层），否则边缘会发虚
性能和兼容性要注意什么
text-shadow 在现代浏览器里基本无压力，但叠加超过 6 层后，在低端 Android WebView 或旧版 Safari 上可能触发渲染降级，表现为闪烁或延迟。
- Chrome/Firefox 支持最多 12 层，实际建议 ≤ 5 层，肉眼已难区分更多层带来的提升
- IE 完全不支持多层
text-shadow（只认第一个），若需兼容 IE，得用 SVG 文字或伪元素模拟 - 动画时慎用：给
text-shadow加transition会导致每帧重绘全部阴影层，比单层慢 3–5 倍；如需呼吸效果，改用opacity动画更稳
常见失效原因排查
写了多层却没看到发光？大概率是这三件事中的一件没做对。
立即学习“前端免费学习笔记（深入）”；
- 文字颜色太浅（如
color: #fff），导致阴影对比度不足——换成深色文字（#000或#111）再试 - 父容器设置了
overflow: hidden，裁掉了外层阴影——检查并移除或设为visible - CSS 优先级被覆盖，比如某处全局重置了
text-shadow: none——用浏览器开发者工具看 computed 样式，确认最终生效的是你写的那串
复杂点在于，同一段文字在不同字号下，最优模糊半径完全不同；16px 字用 5px 外层可能刚好，放大到 48px 就得调到 18px 才自然。别套参数，得调。
