text-shadow实现发光效果的关键是多层相同偏移（0 0）、不同模糊值与颜色的阴影叠加，前两层浅色撑体积、后两层亮色提焦点，单层模糊值≤24px且总层数≤6；safari等webkit浏览器需真机测试。
text-shadow 实现发光效果的关键参数组合
纯 CSS 的 text-shadow 是最轻量、兼容性最好的文字发光方案，不需要 JS 或额外资源。核心在于用多层相同颜色、大模糊值的阴影叠加，而不是只写一层。
- 单层
text-shadow: 0 0 10px #ff00ff;效果弱，边缘发虚不饱满 - 推荐写法：
text-shadow: 0 0 8px #fff, 0 0 12px #fff, 0 0 16px #ff33aa, 0 0 20px #ff33aa; - 前两层用浅色（如
#fff）撑出光晕体积，后两层换亮色（如#ff33aa）增强视觉焦点 - 所有偏移值必须是
0 0，否则会位移，不是“发光”而是“投影”
避免 Safari 和旧版 Edge 的渲染异常
某些 WebKit 内核浏览器（尤其是 Safari 14–15）对过大的 text-shadow 模糊值（>30px）渲染不稳定，可能出现闪烁或裁切。这不是 bug，是硬件加速限制。
- 安全上限建议：单层模糊值 ≤ 24px，总叠加层数 ≤ 6 层
- 若需更强光效，改用
filter: drop-shadow()替代（但注意它作用于整个元素盒模型，可能溢出） - 测试时务必在真机 Safari 上验证，模拟器常不准确
用 filter: drop-shadow() 做更可控的外发光
当文字带透明背景（比如 PNG 图标文字）或需要统一光晕半径时，filter: drop-shadow() 比 text-shadow 更可靠，因为它基于 alpha 通道计算。
- 写法示例：
filter: drop-shadow(0 0 12px #00ffff); - 它不支持多层叠加语法，但可链式使用：
filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 16px rgba(0,255,255,0.6)); - 注意：它会影响整个元素（包括 padding 区域），若容器有内边距，光晕会从 padding 边缘开始扩散
- IE 完全不支持，Chrome/Firefox/Safari（15.4+）均支持
发光文字在深色/浅色背景下的对比度陷阱
发光本身不解决可读性——如果背景和光晕颜色太接近，文字依然看不清。这不是代码问题，是设计逻辑漏洞。
- 深色背景上慎用白色光晕（
#fff），容易融进背景；改用青蓝系（#00eeff）或品红系（#ff33aa）更醒目 - 浅色背景上避免淡黄/浅灰光晕，优先选高饱和深色（
#ff0066）并加大模糊值 - WCAG 建议：发光不能替代文字本身的颜色对比度；正文文字仍需满足至少 4.5:1 的前景/背景比
真正难的不是写出发光，而是让发光不干扰阅读、不掩盖文字结构、在不同屏幕亮度下都稳定可见。调参时盯着手机实拍，比看开发工具预览管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
