霓虹光晕需三层以上text-shadow协同：内层浅蓝（0 0 5px #00aaff）、中层亮紫（0 0 12px #aa00ff）、外层强粉红（0 0 20px #ff00aa），偏移必须全为0 0，模糊半径逐层加大但不超过30px，禁用非零偏移与低饱和度配色。
text-shadow 实现霓虹光晕的关键参数组合
单纯堆叠多层 text-shadow 不等于霓虹效果，核心在于「外扩 + 模糊 + 高饱和色」的协同。比如深色背景上写白字，至少要三层阴影：内层用浅蓝（0 0 5px #00aaff），中层用亮紫（0 0 12px #aa00ff），外层用强粉红（0 0 20px #ff00aa）。注意所有偏移值必须是 0 0，否则光晕会偏移、断裂；模糊半径要逐层加大，但别超过 30px，否则边缘发虚、失去锐度。
常见错误是混用颜色明度差异太小，比如全用不同深浅的蓝，结果像雾气不是霓虹；也有人加 1px 1px 偏移想“撑开”光晕，反而导致文字边缘出现锯齿黑边。
用 opacity 动画制造呼吸感而非简单闪烁
只靠 @keyframes 在 opacity: 1 和 opacity: 0.6 之间跳变，看起来像接触不良的灯管。真正有质感的霓虹呼吸感，需要非线性缓动 + 微幅波动。推荐这样写：
@keyframes neon-pulse {
0%, 100% { opacity: 0.92; }
50% { opacity: 1; }
}
然后配 animation: neon-pulse 3s ease-in-out infinite;。重点：
- 不设 opacity: 0，最低压到 0.9 左右，保留底色透出感
- 周期控制在 2.5–4s，太快像警报，太慢失去动感
- 必须用 ease-in-out，硬切 linear 会显得机械
避免 Chrome/Firefox 渲染不一致的兼容处理
Firefox 对多层 text-shadow 的模糊合成更“厚实”，Chrome 则偏“通透”，同一组值在两边看亮度差可能达 20%。解决方法不是调色，而是加一层兜底：
.neon-text {
text-shadow:
0 0 5px #00aaff,
0 0 12px #aa00ff,
0 0 20px #ff00aa;
/* Firefox 专用增强 */
@supports (-moz-appearance: none) {
text-shadow:
0 0 6px #00aaff,
0 0 14px #aa00ff,
0 0 22px #ff00aa,
0 0 30px #ff00aa;
}
}
另外，Safari 旧版（≤15.6）对 text-shadow 动画支持弱，若需覆盖，可改用 filter: drop-shadow() 替代，但注意它不支持多层独立模糊，只能单层模拟。
性能陷阱：别让霓虹动画拖垮页面帧率
text-shadow 本身不触发重排，但配合 opacity 动画时，如果父容器有 will-change: transform 或其他合成层干扰，GPU 可能反复重建图层。实测发现：
- 直接对
<h1></h1>或<span></span>加动画最稳 - 若嵌套在
position: absolute或transform容器里，务必加backface-visibility: hidden - 禁止同时给同一元素加
opacity动画和filter: blur()，两者叠加在低端设备上极易掉帧
最省资源的做法是把霓虹文字单独抽成 SVG <text></text>，用 filter + animate 控制，但这就脱离纯 CSS 范畴了。
真正难的是调色——同一组 text-shadow 值，在 OLED 屏和 LCD 屏上发光强度差得明显，而用户不会告诉你他用什么屏。所以最终上线前，一定拿 iPhone 和 Windows 笔记本各看三分钟，眼睛发酸那个配色，就是对的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
