text-shadow 是 HTML5 唯一原生支持的跨浏览器发光文字方案，通过多层零偏移、递增模糊半径的阴影叠加实现均匀光晕效果，需兼顾对比度、性能与可访问性。
text-shadow 是 HTML5 里唯一原生支持的“发光文字”方案
别被“dropshadow 滤镜”误导——CSS 中没有 dropshadow 这个属性或滤镜函数。IE 时代曾有 filter: progid:DXImageTransform.Microsoft.DropShadow，但早已废弃且不兼容现代浏览器。现在实现发光效果，唯一标准、跨浏览器、无需 JS 的方式是 text-shadow。
用 text-shadow 实现真正发光（不止是阴影）
text-shadow 本质是叠加多层偏移+模糊的色块，只要把偏移值设为 0 并加大模糊半径，就能模拟均匀发光。关键不是“一层阴影”，而是“多层同中心阴影叠加”：
h1 {
color: #fff;
text-shadow:
0 0 5px #ffcc00,
0 0 10px #ffcc00,
0 0 15px #ff6600,
0 0 20px #ff0000;
}
- 每行
0 0 Xpx color表示：水平偏移 0、垂直偏移 0、模糊半径 X 像素 - 颜色可渐变（如从黄到红），增强光晕层次感
- 避免只写一层
0 0 10px #fff——太单薄，缺乏立体光感 - 发光色建议略暖于文字主色（如白字配淡黄光，蓝字配青白光）
text-shadow 在深色/浅色背景下的表现差异
发光效果是否明显，高度依赖文字与背景的对比度：
- 深色背景（
#121212）上，白字 + 黄光最醒目；但若用纯白光#ffffff，会发“毛边”，失去聚焦感 - 浅色背景（
#f8f9fa）上，黑字加发光容易被吞没——此时应改用深色文字 + 高饱和度光（如#000字 +#0066ff光） - 透明背景（如 PNG 图片 overlay 文字）中，
text-shadow仍生效，但需确认父容器未设置backdrop-filter干扰渲染
性能和可访问性要注意的三个实际坑
看似简单的 text-shadow，在真实项目中常因以下原因出问题：
立即学习“前端免费学习笔记（深入）”；
- 过度堆叠层数（如 8 层以上）会导致 iOS Safari 渲染卡顿，尤其配合
transform: scale(1.05)动画时 - 使用
text-shadow后，部分屏幕阅读器（如 NVDA + Firefox）可能误判文字对比度，导致 WCAG AA/AAA 不达标——务必用工具（如 axe DevTools）检查实际对比度 - 不要对
font-weight: 100或超细字体（如font-family: 'Inter', sans-serif的 thin variant）加强发光，模糊会进一步弱化字形识别度
发光不是越多越好，控制在 3–4 层、总模糊半径 ≤ 25px，视觉清晰度和性能才平衡。
