霓虹光晕需3–4层text-shadow叠加：内层亮核（如0 0 5px #fff），中层主发光（如0 0 10px #0af），外层衰减晕影（如0 0 25px rgba(0,170,255,0.4)），用rgba控透明度保色相纯净，深浅模式需分别适配。
text-shadow 多层叠加实现霓虹光晕的正确写法
直接用一层 text-shadow 做不出霓虹感，必须叠 3–4 层，从内到外由细到粗、由亮到淡。核心不是“加阴影”，而是模拟光在空气中的散射衰减：最内层是纯色高亮（模拟光源），往外逐层增加模糊半径、降低不透明度、微调色相。
- 第一层：
text-shadow: 0 0 5px #fff—— 贴着文字的亮核，blur控制在 3–8px - 第二层：
text-shadow: 0 0 10px #00f, 0 0 15px #00f—— 主发光色，blur比第一层大 2×，颜色别用纯蓝（#00f），改用带点青的高饱和色如#0af - 第三层：
text-shadow: 0 0 25px #004, 0 0 35px #004—— 外晕，颜色变深、透明度自然下降，用rgba(0, 0, 64, 0.6)更可控
为什么用 rgba() 而不是十六进制色？
霓虹光在现实中会随距离衰减亮度和饱和度，十六进制色无法控制透明度，硬调暗色（比如 #004）容易发灰、失去荧光感。用 rgba() 可以独立调节 alpha 通道，让外层晕影保持色相纯净，只削弱强度。
- 错误写法：
text-shadow: 0 0 20px #004—— 颜色变脏，缺乏通透感 - 推荐写法：
text-shadow: 0 0 20px rgba(0, 170, 255, 0.4)—— 色相不变，仅压透明度 - 注意：IE 不支持
rgba()在text-shadow中，如需兼容旧浏览器，得 fallback 到单层浅色阴影
性能与可访问性隐患
超过 5 层 text-shadow 或 blur 半径 > 40px，在低端移动设备上可能引发渲染卡顿；同时高对比+高频闪烁色（如荧光粉+深背景）会触发部分用户的光敏反应。
- 移动端慎用：
blur > 30px在 iOS Safari 上易出现边缘锯齿或掉帧 - 无障碍风险：避免
#ff00ff类强荧光色搭配黑色背景，WCAG 推荐对比度 ≥ 4.5:1，可用color-contrast工具校验 - 动画慎加：给
text-shadow加transition或animation会强制重绘整块文字区域，比改color开销大得多
适配深色/浅色模式的动态方案
固定写死颜色在深色或浅色背景下都会翻车。用 @media (prefers-color-scheme: dark) 切换整套 shadow 参数更稳妥，而不是只调一两个颜色。
h1 {
text-shadow: 0 0 5px #fff, 0 0 10px #0af, 0 0 20px rgba(0, 170, 255, 0.5);
}
@media (prefers-color-scheme: dark) {
h1 {
text-shadow: 0 0 5px #00f, 0 0 12px #0ff, 0 0 25px rgba(0, 255, 255, 0.6);
}
}
关键点在于：深色模式下主发光色要更冷（偏青蓝），浅色模式下可稍暖（偏紫白），且外晕透明度略提高，否则在白底上显得过重。
实际项目里最容易被忽略的是 blur 半径和设备像素比的匹配——Retina 屏上 blur: 10px 看起来和普通屏 blur: 20px 接近，但 CSS 不会自动缩放，得靠测试真机确认观感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
