text-shadow是唯一可靠跨浏览器的文字发光方案，需叠4–5层0 0偏移、递增模糊半径的色影，禁用纯白与box-shadow替代，注意overflow截断、透明文字无载体、safari抗锯齿干扰及移动端渲染限制。
text-shadow 是唯一可靠、跨浏览器、零依赖的文字阴影与发光方案；别试 filter: dropshadow 或 box-shadow，它们对文字本身完全无效。
text-shadow 多层叠加才能真正“发光”
单层 text-shadow: 0 0 10px #fff 看起来像灰雾，不是光晕。发光的本质是多层同中心、不同模糊半径的色块叠加，模拟高斯扩散。关键不是“加一层”，而是“叠四到五层”：
- 每层
blur-radius递增（如5px、10px、15px、20px），颜色可微调（比如从浅黄过渡到橙红） - 所有偏移必须为
0 0，哪怕写成+0 +0都可能被某些旧版 Safari 解析异常 - 避免用纯白
#fff堆叠——易过曝、失层次；改用带色相的亮色，如#ffcc00、#ff6600 - 示例：
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ff6600, 0 0 20px #ff0000;
为什么写了 text-shadow 却看不到？
90% 的“失效”不是语法错，而是渲染上下文被截断或覆盖：
- 父容器设置了
overflow: hidden，而发光阴影超出边界 → 检查 DevTools 中该元素的 computedoverflow - 文字颜色是
transparent或rgba(0,0,0,0)→text-shadow不会凭空显示，它需要文字内容作为载体 - 用了
-webkit-text-fill-color: transparent但没给伪元素或渐变文字单独设text-shadow→ 渐变文字必须显式声明阴影 - 在 macOS Safari 上启用了
-webkit-font-smoothing: antialiased→ 会弱化甚至吞掉小模糊值的阴影，临时关掉测试
box-shadow 对文字没用，但对按钮容器有用
给 <button></button> 加阴影，分两层理解：
- 文字阴影：用
text-shadow控制按钮内文字的立体感或发光 - 按钮框阴影：用
box-shadow控制按钮整体浮起效果，参数建议0 2px 8px rgba(0,0,0,0.12) - 两者不冲突，但别混用——
box-shadow再大也不会让按钮里的字“发光” - 移动端慎用大
blur-radius（>12px），iOS Safari 对超大模糊渲染不稳定，容易锯齿或闪烁
霓虹灯动画要控制变量，别堆 keyframes
用 @keyframes 做闪烁时，只动一两个变量最稳：
- 只改
text-shadow中某一层的blur-radius（如从15px→5px），其他层保持不变 - 或只切换两组预设的
text-shadow值（用 CSS 自定义属性 +transition更轻量） - 避免在动画中频繁修改全部 4–5 层阴影值，重绘开销陡增，尤其在低端 Android 设备上易卡顿
- 别用
animation-timing-function: steps(1)模拟开关灯——多数浏览器不支持text-shadow的离散插值，会直接跳变
真正难调的不是参数，是深色模式下发光色与背景的对比度塌缩，还有系统级字体抗锯齿开启后对模糊边缘的干扰——这些没法靠一套 CSS 解决，得实机连测三台设备再定稿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
