纯CSS文字发光必须用text-shadow多层叠加，每层需完整写出offset-x、offset-y、blur-radius和color四个值，且偏移量必须为0；推荐4层跳档模糊（1px/2px/4px/8px）配合hsla()控制透明度与色相，禁用含黑颜色，注意Safari及微信兼容性、字体粗细与背景深色要求。
纯 CSS 文字发光必须用 text-shadow 多层叠加，写错一层参数整条声明就静默失效——不是没效果，是浏览器直接忽略。
text-shadow 多层写法必须写全四个值
每层阴影都得明确写出 offset-x、offset-y、blur-radius 和 color，一个都不能省。漏掉 offset-y 或把 blur-radius 写成负数，后面的颜色就会被当成模糊值解析，结果文字变糊但无光。
-
0 0 5px #0af✅ 正确：两个偏移为 0，模糊 5px，颜色蓝青 -
0 5px #0af❌ 错误：浏览器把#0af当成blur-radius，实际渲染为模糊文字而非发光 - 所有层的
offset-x和offset-y必须为0，否则光晕不对称、文字“飘” - 用
hsla()或rgba()控制透明度时，alpha 值别低于0.2，太低在 Safari 上会不可见
霓虹发光推荐 4 层跳档模糊半径
1px → 2px → 4px → 8px 是经过真机验证的黄金比例，线性递增（如 5px/10px/15px）会导致中间层次塌陷，看起来像一层厚糊边。
- 第 1 层（内核）：
0 0 1px hsla(240, 100%, 70%, 0.6)，高亮蓝，紧贴文字 - 第 2 层（过渡）：
0 0 2px hsla(180, 100%, 65%, 0.5)，青色，冷暖衔接 - 第 3 层（主体）：
0 0 4px hsla(270, 90%, 60%, 0.4)，紫色，撑开光晕体积 - 第 4 层（漫射）：
0 0 8px hsla(330, 90%, 55%, 0.3)，粉红，模拟环境散射 - 禁用
rgba(0,0,0,0.5)这类含黑颜色——它吸光，霓虹立刻发灰
Safari 和微信内置浏览器的兼容陷阱
旧版 Safari（iOS 14 及更早）对单条 text-shadow 声明里的层数做过硬限制，曾卡死在 2 层；现在虽放宽，但低端安卓 WebView 或微信 8.0.x 仍可能 fallback 到只渲染前两层。
- 务必在 iPhone 真机 + 微信最新版打开测试，Chrome DevTools 的模拟不靠谱
- 若必须强兼容，降级为双层：
0 0 2px #00f, 0 0 12px #f0f，牺牲层次保可用 - 字体大小
font-size小于16px时，blur-radius小于1px的层在 Retina 屏上会消失 - 父容器不能设
overflow: hidden——霓虹光晕是向外扩散的，裁剪等于砍掉最外两层
动画闪烁别碰 opacity，改 text-shadow 里的 alpha
对元素加 opacity 动画，会让文字本体和所有光晕一起变淡，效果像灯泡快熄灭；真正要动的是光晕“浓度”，所以必须重写整个 text-shadow 值。
- 亮态：
text-shadow: 0 0 1px hsla(240,100%,70%,1), 0 0 2px hsla(180,100%,65%,0.8), ... - 暗态：
text-shadow: 0 0 1px hsla(240,100%,70%,0.3), 0 0 2px hsla(180,100%,65%,0.2), ... - 过渡只能作用于可插值属性：hsl() 的色相/亮度、rgba() 的 alpha；别试图动画
blur-radius像素值，无效 - 频繁 hover 触发动画会触发重绘，低端设备卡顿，建议加
will-change: text-shadow
最易被忽略的点：字体必须是粗体（font-weight: 900）或无衬线体（如 'Arial Black', sans-serif），细字体 + 大模糊 = 文字溶解；深色背景不是可选项，是必要条件——浅底上发光直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
