text-shadow 是唯一纯 CSS 文字发光方案，offset-x 和 offset-y 必须为 0 才能实现均匀光晕，多层写法需严格按四值顺序、跳档模糊（如 0 0 1px/2px/4px/8px），真机测试不可替代，动画应调 alpha 而非 opacity。
text-shadow 是唯一能纯 CSS 实现文字发光的方案，但写错一个参数整条声明就会静默失效——不是没效果，是浏览器直接跳过。
为什么 offset-x 和 offset-y 必须都为 0
发光是光晕向四周均匀扩散，只要任一偏移非零，比如 0 2px 4px #000，阴影就变成向下“坠落”的投影，不是发光。浏览器不会自动居中补正，它严格按你写的值渲染。
-
0 0 5px #fff✅ 光晕饱满对称 -
0 1px 5px #fff❌ 底部变厚、顶部发虚，像被压扁 -
1px 0 5px #fff❌ 左侧糊、右侧锐利，视觉失衡
多层 text-shadow 的写法容错率极低
每层必须完整写出四个值：offset-x、offset-y、blur-radius、color。漏一个或顺序错，整条声明会被浏览器静默丢弃——你不会看到报错，只会发现“没效果”。
- 错误：
0 0 1px hsla(240,100%,70%,0.6), 0 0 2px hsla(180,100%,65%,0.5)→ 第二层缺 color？不，这是对的；但若写成0 0 1px hsla(), 0 0 2px，第二层就失效 - 错误：
0 0 #0af, 0 0 4px #f0f→ 第二层的#f0f被当成 blur-radius，实际解析为模糊文字 - 推荐四层跳档模糊：
0 0 1px、0 0 2px、0 0 4px、0 0 8px，线性递增会塌层
真机测试比 DevTools 更关键
Safari（尤其 iOS 14 及更早）和微信内置 WebView 对单条 text-shadow 的层数有硬限制。Chrome 模拟器显示四层正常，但 iPhone 实测可能只渲染前两层。
立即学习“前端免费学习笔记（深入）”；
- 务必在 iPhone 真机 + 微信最新版打开验证，不能依赖桌面模拟
- 若需强兼容，降级用双层：
0 0 2px #00f, 0 0 12px #f0f，牺牲层次保功能 - 字体
font-size小于 16px 时，blur-radius小于 1px 的层在 Retina 屏上不可见 - 父容器禁用
overflow: hidden——光晕向外扩散，裁剪等于砍掉最外两层
动画别碰 opacity，改 text-shadow 里的 alpha
给文字加 opacity: 0.8 动画，会让文字本体和所有光晕一起变淡，效果像灯泡电压不足；真正要动的是光晕“浓度”，也就是每层里的 alpha 值。
- 正确动画写法：
text-shadow: 0 0 1px hsla(240,100%,70%,0.3), 0 0 4px hsla(240,100%,70%,0.2)→ hover 时改为0.8和0.6 - 禁用含黑颜色，如
rgba(0,0,0,0.5)，它吸光，霓虹立刻发灰 - 背景宜深色，浅底白光易导致文字膨胀、虚化，可读性下降
最常被忽略的点：模糊半径不是越大越好，而是必须严格跳档递进；alpha 值低于 0.2 在 Safari 上可能不可见；动画中频繁重写 text-shadow 会触发重绘，低端设备卡顿——这些细节不调，发光就只是“看起来亮”，而不是“稳稳地亮”。
