必须都设为0才能实现对称光晕效果，因为非零偏移会导致阴影单向“坠落”，浏览器不会自动居中补正；多层text-shadow每层须完整写出四个值，缺一即失效；真机测试至关重要，iOS Safari和微信WebView对层数有限制；小字号需注意blur-radius可见性，动画应调alpha而非opacity，且父容器禁用overflow:hidden。
为什么 offset-x 和 offset-y 必须都设为 0
发光不是投影，本质是光晕向四周均匀扩散。只要 offset-x 或 offset-y 有一个非零（比如 0 2px 4px #000），阴影就会单向“坠落”，文字看起来像被压扁或拖尾，而不是发亮。
浏览器不会自动居中补正——它严格按参数渲染。所以必须写成 0 0 5px #fff 这种形式，才能保证光晕对称饱满。
多层 text-shadow 的写法容错率极低
每层都必须完整写出四个值：offset-x、offset-y、blur-radius、color。漏一个、顺序错、或把颜色写成数字，整条声明会被浏览器静默丢弃——你不会看到报错，只会发现“没效果”。
-
0 0 1px hsla(240,100%,70%,0.6), 0 0 2px hsla(180,100%,65%,0.5)✅ 正确 -
0 0 1px hsla(...), 0 0 2px❌ 缺color，第二层失效 -
0 0 #0af, 0 0 4px #f0f❌ 第二层的#f0f被当成blur-radius，实际解析失败
真机测试比 DevTools 更关键
Safari（尤其 iOS 14 及更早）和微信内置 WebView 对单条 text-shadow 声明里的层数有硬限制。Chrome 模拟器显示四层正常，但 iPhone 实测可能只渲染前两层，第三、四层直接跳过。
立即学习“前端免费学习笔记（深入）”；
务必在 iPhone 真机 + 微信最新版打开验证，不能依赖桌面模拟。若需强兼容，降级用双层：0 0 2px #00f, 0 0 12px #f0f，牺牲层次保功能。
小字号和动画的常见陷阱
font-size 小于 16px 时，blur-radius 小于 1px 的层在 Retina 屏上不可见；给文字加 opacity 动画会让文字本体和所有光晕一起变淡，效果像灯泡电压不足——真正要动的是光晕“浓度”，也就是每层里的 alpha 值。
正确动画写法：
默认：text-shadow: 0 0 1px hsla(240,100%,70%,0.3), 0 0 4px hsla(180,100%,65%,0.2)
hover 时改为：0 0 1px hsla(240,100%,70%,0.8), 0 0 4px hsla(180,100%,65%,0.6)
父容器还不能设 overflow: hidden——光晕是向外扩散的，裁剪等于砍掉最外两层。
