text-shadow多层发光必须全用0偏移，否则光晕错位虚化；内层模糊从3px起步，外层不超40px；颜色须用高饱和hsla/rgba而非半透黑，严格递增模糊值并确保字号≥16px、背景纯黑、字体无衬线粗体。
text-shadow 多层叠加必须全用 0 偏移
偏移量不是装饰，是发光是否“贴合文字”的关键。只要 offset-x 或 offset-y 不为 0，光晕就会错位、虚化不均，看起来像字在抖而不是在发光。所有层都得写成 0 0 Xpx color 形式。
常见错误是复制粘贴时漏掉某个 0，比如写成 0 2px 10px #0af —— 这直接导致文字下方拖影，失去霓虹的“通透膨胀感”。
- 内层模糊值建议从
3px起步（太小在高 DPI 屏上不可见） - 外层最大别超
40px，否则在 Retina 屏上糊成一团灰雾 - 每层模糊值不必等比放大，但必须严格递增：比如
5px → 12px → 22px → 36px
颜色不能只调 alpha，得用高饱和 hsla/rgba
用 rgba(0, 0, 0, 0.3) 或 hsla(0, 0%, 0%, 0.3) 是最常见翻车点——黑色半透吸光，霓虹立刻变脏、发灰、没呼吸感。真正有效的做法是：主色保持高饱和度，仅靠降低透明度控制强度。
例如蓝紫系推荐这样配：
- 内核层：
hsla(240, 100%, 70%, 0.6)（亮蓝，高饱和低透） - 中层：
hsla(200, 90%, 60%, 0.4)（带青的冷蓝，稍暗但更透） - 外晕层：
hsla(280, 80%, 50%, 0.25)（紫调，进一步衰减）
避免用纯 #00f 或 #f0f —— 它们在不同设备上色域表现差异大，hsla 更可控。
Chrome 和 Safari 对多层 text-shadow 动画处理不一致
Chrome 115+ 默认启用图层合成优化，但对超过 5 层的 text-shadow 动画容易跳帧；Safari 则始终不将 text-shadow 提升为独立渲染图层，动画卡顿是常态，不是你代码写错了。
实操建议：
- 闪烁动画优先驱动
opacity+text-shadow同步变化，别只动其中一项 - 动画周期设为
1.8s ~ 2.5s，太短像接触不良，太长失去“灯管余晖”感 - 真机测试必做：微信内置浏览器（基于旧版 Safari）、iOS 16.7 真机、macOS Safari 17.4
- 降级方案：双层
text-shadow+filter: blur(1px) brightness(1.6)，保可用性
小字号或深色背景下的细节陷阱
font-size 时，<code>text-shadow 模糊半径低于 1px 的层基本不可见；而深色背景虽是霓虹刚需，但若背景本身有噪点或渐变，会干扰光晕层次。
稳妥做法：
- 字号 ≥
16px才启用完整 4 层光效 - 背景用纯黑
#000或极暗灰#0a0a0a，禁用带纹理的background-image - 配合
isolation: isolate防止父级滤镜污染文字渲染 - 字体选无衬线粗体（如
font-family: 'Inter', sans-serif;），避免宋体类在模糊后结构崩解
最易被忽略的是：光效再炫，如果文字本身对比度不够、可读性下降，就只是视觉噪音。先确保 color 和背景的 WCAG AA 对比度达标，再叠光效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
