真正发光需多层text-shadow叠加，且必须按模糊半径从大到小（外到内）书写，所有层偏移为0 0、颜色带透明度，否则仅显糊边而非光晕。
直接用 text-shadow 就能实现，但只写一层、颜色写错、偏移不为 0，效果就只是糊边，不是发光。
text-shadow 多层叠加必须从外到内写
浏览器按声明顺序从下往上绘制阴影，所以最外围、最模糊的那层得写在最前面。否则后写的会盖住前写的，只剩最亮那一层——看着像描边，不是光晕。
- 错误写法：
text-shadow: 0 0 2px #fff, 0 0 5px #0ff;（后一层锐利，盖掉外层） - 正确写法：
text-shadow: 0 0 15px #0ff, 0 0 10px #0ff, 0 0 5px #0ff, 0 0 2px #fff; - 所有层的前两个值必须是
0 0，否则变成投影或拖影 - 每层都得写全四个参数，漏掉
blur-radius或颜色，整条会被静默忽略
颜色和透明度不能硬套纯色
纯白 #fff 在浅背景上等于没加；纯黑 #000 在深背景上发灰不可见；rgba 里 alpha 值低于 0.2 在 iOS Safari 上可能直接消失。
- 深色背景推荐：
text-shadow: 0 0 20px hsla(200, 100%, 60%, 0.7), 0 0 12px hsla(200, 100%, 70%, 0.5), 0 0 4px rgba(255, 255, 255, 0.8); - 浅色背景慎用亮色，改用低饱和黑灰：
text-shadow: 0 0 3px rgba(0, 0, 0, 0.15), 0 0 8px rgba(0, 0, 0, 0.08); - 文字本身颜色建议比发光色略深，比如蓝字配青白光，白字配淡黄光
写了没效果？先查这三处
90% 的“不发光”不是语法问题，而是被环境拦截了。
- 父容器设置了
overflow: hidden，裁掉了外层阴影——临时改成visible测试 - 文字颜色是
transparent或rgba(0,0,0,0)，text-shadow没载体可渲染 - CSS 优先级被覆盖，比如某处全局写了
text-shadow: none——用开发者工具看 computed 样式确认最终生效值 - macOS Safari 默认子像素抗锯齿会吃掉小模糊细节，可加
-webkit-font-smoothing: antialiased;强制关闭测试
动画别直接动 text-shadow
Chrome/Firefox/Safari 都不支持 text-shadow 的 CSS 插值动画，写 @keyframes 改它只会跳变或不动。
- 替代方案：用
filter: drop-shadow()，它支持动画且渲染更稳 - 必须搭配
will-change: filter或transform: translateZ(0)触发 GPU 加速，否则卡顿明显 - 呼吸灯节奏靠
cubic-bezier(0.35, 0.01, 0.17, 1.14)控制，周期设 4–6 秒，避免在 0% 和 100% 帧设完全相同值 - 移动端慎用大
blur-radius动画，iOS Safari 超过 12px 易闪烁
真正麻烦的是，同一组 text-shadow 参数，在 16px 字号下刚好，在 48px 下就发虚；在 Windows 高分屏看着饱满，在 macOS Retina 屏上又显得弱——没有通用值，只能实机调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
