真正发光需至少两层零偏移、不同模糊半径、带透明度的颜色叠加；单层大模糊仅显糊边，缺乏明暗过渡与体积感，内层小模糊（2–4px）勾勒光核，外层大模糊（8–20px）扩散光晕，颜色须具明度/透明度梯度，背景不匹配或颜色选错则效果失效。
真正发光不是加一层 text-shadow 就完事，而是靠至少两层零偏移、不同模糊半径、带透明度的颜色叠加；颜色选错或背景不匹配，效果直接失效。
为什么 text-shadow: 0 0 10px #fff 看起来像糊边而不是发光
因为单层大模糊只产生一个“毛边”，缺乏光晕的层次感——人眼识别发光依赖明暗过渡和体积感。浏览器渲染时，text-shadow 是逐层绘制的，内层小模糊（2–4px）负责勾勒光核，外层大模糊（8–20px）负责扩散光晕，两者颜色还应有明度/透明度梯度。
- 纯色如
#fff在浅背景上会“隐形”，建议改用rgba(255, 255, 255, 0.7) - 深色背景推荐暖白/青白系：如
rgba(255, 255, 220, 0.8), 0 0 12px rgba(100, 200, 255, 0.5) - 浅色背景慎用亮色，改用低饱和黑灰：如
0 0 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1) - 水平/垂直偏移值（前两个参数）必须都是
0，否则变成投影而非发光
text-shadow 颜色怎么配才不刺眼又显眼
发光色不是文字色的简单复制，而是要反向适配背景并控制能量感。深底可用高对比色（如蓝紫、青黄），但亮度不能拉满；浅底只能压低明度、提高透明度，否则像打补光灯。
- 深色背景（#111、#203）：优先试
rgba(255, 215, 0, 0.9)（金白）或rgba(0, 200, 255, 0.7)（青蓝） - 浅色背景（#f8f8f8、#fff）：用
rgba(0, 0, 0, 0.15)起手，再叠一层rgba(0, 0, 0, 0.08)，避免发灰或过曝 - 别直接写
white或black——它们没有 alpha 通道，无法渐变衰减 - 字体本身颜色建议比发光色略深/略暗，比如白字配淡黄光，蓝字配青白光
多层 text-shadow 的性能与兼容性红线
现代浏览器（Chrome/Firefox/Safari/Edge）对 text-shadow 支持极好，IE10+ 也 OK，但滥用会拖慢重绘，尤其在动画或移动端。
- 安全上限：≤4 层阴影，单层
blur-radius≤20px；iOS Safari 超过易闪烁 - 动画中动态改
text-shadow（如 hover 发光增强），务必加will-change: text-shadow提前提示渲染引擎 - 小字号（8px 模糊，光晕会吃掉字形细节；建议先加
font-weight: bold和font-size: 16px测试可见性 - macOS 上若发光不清晰，可临时加
-webkit-font-smoothing: antialiased关闭子像素渲染
父容器裁切导致发光“断掉”怎么排查
大模糊阴影本质是向外扩张的像素区域，如果父元素设置了 overflow: hidden、line-height 过小、或 height 固定，光晕会被硬裁掉，看起来像半截发光。
- 用浏览器开发者工具检查元素盒模型，看
text-shadow是否被overflow截断 - 给文字容器加
padding（至少等于最大模糊半径）或设overflow: visible - 行高不够时，
line-height: 1.4或更高，避免多行文字挤压光晕空间 - 绝对定位元素若没设
z-index，可能被兄弟元素遮挡发光层
最常被忽略的其实是字体本身——细字体 + 小字号 + 默认抗锯齿，三者叠加会让所有发光努力归零。动手前先确认字重、字号、系统渲染设置是否撑得起你要的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
