真正发光需2–3层text-shadow叠加，内层小模糊（2–4px）+外层大模糊（8–20px），颜色由实色渐变至半透，偏移量必须为0，且需依背景色调整配色与透明度。
text-shadow 怎么写才能让文字真正“发光”
纯靠 text-shadow 实现发光效果，关键不是叠得多，而是控制好模糊半径和颜色透明度。直接写 text-shadow: 0 0 10px #ff0000; 看起来像发光，但实际是边缘发虚，缺乏光晕层次感。
- 真正发光需要至少 2–3 层阴影叠加：内层小模糊（
blur-radius2–4px）+ 外层大模糊（blur-radius8–20px），颜色从实色渐变到半透 - 别用纯白或纯黑做发光色——
#fff在浅背景上会“消失”，rgba(255, 255, 255, 0.7)更可控 - 水平/垂直偏移量（前两个值）必须都是
0，否则变成“投影”而非“发光”
深色背景 vs 浅色背景的发光配色差异
同一段 text-shadow 在不同背景上效果天差地别。深色背景上可用高饱和色（如 #00f、#0ff），浅色背景则必须压低亮度、提高透明度，否则刺眼或看不见。
- 深色背景推荐：
text-shadow: 0 0 4px #00f, 0 0 12px rgba(0, 100, 255, 0.6); - 浅色背景推荐：
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.2);（用黑灰模拟“内敛发光”，避免过曝） - 千万别在白色背景上用
text-shadow: 0 0 10px white;——等于没加
性能和兼容性要注意什么
text-shadow 本身兼容性极好（IE10+、所有现代浏览器都支持），但滥用多层大模糊会拖慢渲染，尤其在移动端或文字频繁重绘时（比如 hover 动画）。
- 超过 4 层阴影或单层
blur-radius > 20px，iOS Safari 可能出现闪烁或掉帧 - 动画中动态改
text-shadow（比如 hover 放大发光范围）建议用will-change: text-shadow;提前提示渲染引擎 - 如果要兼容 IE9 及更早版本，得用 SVG
filter或 JS 插件，但代价是复杂度飙升，不推荐
为什么加了 text-shadow 还不发光？常见排查点
最常被忽略的是字体粗细和抗锯齿设置。细字体（font-weight: 300）+ 默认抗锯齿，在小字号下根本撑不起光晕；而系统强制子像素渲染（如 macOS 的 -webkit-font-smoothing: subpixel-antialiased;）也会吃掉部分阴影细节。
- 先检查是否被其他 CSS 覆盖：用浏览器开发者工具看
text-shadow是否显示为“已划掉” - 试试临时加
font-weight: bold;和font-size: 20px;，确认是不是字号/字重太小导致效果不可见 - macOS 上可加
-webkit-font-smoothing: antialiased;强制关闭子像素渲染，让阴影更清晰 - 别忘了父容器设置了
overflow: hidden;——大模糊阴影可能被裁掉
text-shadow 值。没有万能参数，但有原则：少叠层、控透明、盯背景、验真机。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
