发光文字必须至少叠两层零偏移、不同模糊半径、带透明度的text-shadow，单层仅显糊边；内层小模糊（2–4px）勾勒光核，外层大模糊（8–20px）扩散光晕，颜色需明度与透明度梯度适配背景。
发光文字不是加一行 text-shadow 就能成的，必须至少叠两层、零偏移、不同模糊半径、带透明度的颜色——否则只是糊边，不是光。
为什么单层 text-shadow: 0 0 10px #fff 看起来像毛边？
浏览器渲染 text-shadow 是逐层绘制的。单层大模糊只生成一个均匀“灰雾”，缺乏明暗过渡和体积感，人眼识别不出“光晕”。真正发光需要内层勾轮廓、外层扩光晕：
- 内层用小模糊（
2px–4px），颜色实一点（如rgba(255, 215, 0, 0.9)） - 外层用大模糊（
8px–20px），颜色淡一点（如rgba(255, 152, 0, 0.5)） - 所有偏移值必须是
0 0，写成+0 +0或带空格都可能在旧 Safari 中出错
深色背景 vs 浅色背景的配色怎么选？
同一段 text-shadow 换个背景就失效，关键在颜色明度与透明度的反向适配：
- 深色背景（如
#111、#203）：可用高饱和暖色，比如0 0 4px #ffeb3b, 0 0 12px rgba(255, 152, 0, 0.6) - 浅色背景（如
#f8f8f8）：禁用亮色，改用低饱和黑灰，比如0 0 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1) - 别直接写
white或black——它们没 alpha 通道，无法渐变衰减
父容器裁切导致发光“断掉”怎么排查？
大模糊阴影本质是向外扩张的像素区域，很容易超出文字原始尺寸。常见被裁原因：
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
overflow: hidden→ 在 DevTools 中检查 computedoverflow值 - 文字本身
color是transparent或rgba(0,0,0,0)→text-shadow需要文字作为载体，没内容就无影可投 - 用了
-webkit-text-fill-color: transparent却没给文字显式声明text-shadow→ 渐变文字必须单独加 - macOS 上启用了
-webkit-font-smoothing: subpixel-antialiased→ 会吃掉小模糊细节，临时加-webkit-font-smoothing: antialiased测试
移动端和动画里的性能红线在哪？
多层 text-shadow 在 iOS Safari 上容易闪烁或掉帧，尤其动态改时：
- ≤ 4 层阴影足够，超过 5 层在低端 Android 上可能卡顿
- 最大模糊值建议 ≤
24px；iOS Safari 超过30px渲染不稳定 - 做
:hover发光增强时，加will-change: text-shadow提前提示渲染引擎 - 别对
text-shadow做transform: scale()动画——触发重绘开销大且失真
真正自然的发光效果，取决于你有没有在目标背景色、真实字号、开启抗锯齿的真实设备上，一帧一帧调过那几组 text-shadow 值。
