纯css文字发光只能用text-shadow多层叠加实现，每层必须写全h-offset、v-offset、blur-radius和color四个值，漏写或blur-radius为负数会导致整条声明被浏览器静默忽略。
纯 CSS 文字发光只能靠 text-shadow 多层叠加实现，写错任意一层参数（比如漏掉 v-offset 或把 blur-radius 写成负数），整条声明会被浏览器静默忽略——不是效果变弱，是直接不渲染。
text-shadow 多层写法必须写全四个值
每层阴影都得明确写出 h-offset、v-offset、blur-radius 和 color，一个都不能省。常见错误：
-
0 0 5px #0af✅ 正确：两个偏移为 0，模糊 5px，颜色蓝青 -
0 5px #0af❌ 错误：浏览器把#0af当成blur-radius，实际渲染为模糊文字而非发光 -
0 0 -2px #fff❌ 错误：blur-radius不支持负值，整条声明失效
发光效果失效的三大高频原因
加了 text-shadow 却看不到光，大概率是以下其一：
- 父容器设置了
overflow: hidden—— 大模糊半径的光晕被裁掉，尤其blur-radius > 8px时明显 - 字体太细或字号太小：
font-size 时，<code>blur-radius 的层在 Retina 屏上会不可见；<code>font-weight: 300难以撑起光晕体积 - 背景色干扰：白色背景上用
text-shadow: 0 0 10px white等于没加；浅色背景需改用rgba(0,0,0,0.2)类黑灰模拟内敛发光
移动端与微信浏览器的兼容陷阱
旧版 Safari（iOS 14 及更早）和部分安卓 WebView 对单条 text-shadow 声明里的层数有硬限制，曾卡死在 2 层；微信 8.0.x 仍可能只渲染前两层。
- 真机测试必须做：Chrome DevTools 模拟完全不靠谱
- 强兼容方案建议降级为双层：
0 0 2px #00f, 0 0 12px #f0f，牺牲层次保可用 - 别在动画中滥用大模糊：单层
blur-radius > 20px或总层数 > 4，在 iOS Safari 上易闪烁或掉帧
动态发光动画别碰 opacity
给文字加 opacity 动画，会让文字本体和所有光晕一起变淡，效果像灯泡快熄灭；真正要动的是光晕“浓度”。
- 必须重写整个
text-shadow值，例如在@keyframes中切换不同 alpha 的hsla() - 频繁重绘场景（如 hover 发光增强）建议加
will-change: text-shadow提示渲染引擎 - macOS 下若阴影细节被吃掉，可临时加
-webkit-font-smoothing: antialiased关闭子像素渲染
最易被忽略的其实是字体粗细与父容器溢出控制——再精细的 text-shadow 配方，遇上 font-weight: normal 和 overflow: hidden，也只剩一层糊边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
