纯css发光效果必须用text-shadow多层叠加，因drop-shadow仅支持单层轮廓投影、无法分层控色相透明度、在safari/微信中易裁剪失真，且不支持跳档模糊实现霓虹渐变；text-shadow每层须写全0 0 blur-radius color四值、偏移为0、用hsla()、跳档模糊（1px→2px→4px→8px）。
纯 CSS 发光效果不能靠 filter: drop-shadow() 或 filter: blur() 实现，必须用 text-shadow 多层叠加——这是唯一被所有主流浏览器稳定支持、且能精确控制光晕体积的方式。
为什么 filter: drop-shadow() 不适合发光
filter: drop-shadow() 本质是基于元素轮廓的单层投影，它会把整个文字块当做一个形状来“描边”，导致光晕边缘生硬、无法分层控制透明度和色相，且在 Safari 和微信 WebView 中常出现裁剪或颜色失真。更关键的是：它不支持多层模糊半径跳档，做不到霓虹灯那种由内而外渐变扩散的效果。
-
drop-shadow(0_0_10px_#0af)看似简单，但实际渲染为一个统一模糊的“光罩”，没有层次感 - 与
backdrop-blur或overflow: hidden共存时，光晕大概率被截断 - 无法单独动画某一层光晕（比如只让最外层呼吸闪烁）
text-shadow 多层写法必须满足四个硬性条件
漏掉任意一条，整条声明就会静默失效——浏览器不报错，但你什么也看不到。
- 每层都必须写全
offset-x、offset-y、blur-radius、color四个值，顺序不能乱 -
offset-x和offset-y必须为0，否则光晕偏移、文字“飘” - 颜色必须用
hsla()或rgba()，禁用命名色（如blue）和含黑值（如rgba(0,0,0,0.3)） - 模糊半径推荐跳档组合：
1px→2px→4px→8px，线性递增会塌层
正确示例：text-[0_0_1px_hsla(240,100%,70%,0.6),_0_0_2px_hsla(180,100%,65%,0.5),_0_0_4px_hsla(270,90%,60%,0.4),_0_0_8px_hsla(330,90%,55%,0.3)]
Tailwind 中用 arbitrary values 写 text-shadow 的坑
直接写 text-shadow-md 会失效——Tailwind 默认不启用文字阴影工具类，除非你装了插件并配置了 textShadow 主题项。临时方案只能靠方括号语法，但解析器极敏感：
- 空格必须全部替换成下划线
_，连逗号前后的空格也不能留 - 括号保留，但不能嵌套写错，比如
hsla(240_100%_70%_0.6)是错的，应为hsla(240,100%,70%,0.6) - 不能省略任一参数，
text-[0_0_4px_rgba(0,0,0,0.2)]可以，text-[0_0_4px]不行 - 字体小于
16px时，1px模糊层在 Retina 屏上可能不可见
深色背景下发光失效怎么办
不是阴影没生效，而是默认的 rgba(0,0,0,0.x) 在深色背景下对比度崩塌。解决方案不是加粗，而是换色相+调 alpha：
- 避免用黑灰系，改用冷暖跳色：蓝→青→紫→粉，hsla 色相差至少 30°
- alpha 值别低于
0.2，Safari 对低透明度光晕渲染不稳定 - 父容器不能设
overflow: hidden——光晕是向外扩散的，裁剪等于砍掉最外两层 - 真机测试必须在 iPhone + 微信最新版跑，DevTools 模拟不可信
真正难的不是写对语法，而是让四层光晕在不同设备、不同缩放、不同系统设置下都保持通透不糊——这需要逐层微调 blur-radius 和 alpha，而不是套模板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
