box-shadow多层必须写在同一声明中并用逗号分隔，重复声明会覆盖；text-shadow需4–5层同中心偏移（0 0）叠加才显霓虹感，禁用纯白以防过曝，父容器overflow:hidden会裁剪光晕。
box-shadow 多层写法必须用逗号分隔，不能重复声明
直接写多个 box-shadow 声明会覆盖前一个——浏览器只认最后一个。常见错误是这样：
button {
box-shadow: 0 0 5px #f0f;
box-shadow: 0 0 10px #0ff;
}
结果只有第二层生效。正确写法是把所有层写在同一行，用逗号分隔：
button {
box-shadow: 0 0 5px #f0f, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #00f;
}
- 每层偏移值必须一致（如全用
0 0），否则光晕错位，失去“同心发光”感 - 顺序影响视觉层级：靠前的更外层、更淡；靠后的更内层、更实
- 漏掉逗号或换行断开会导致整个声明被浏览器忽略（CSS 语法错误）
text-shadow 必须叠 4–5 层才像真发光，纯白会过曝
text-shadow 是文字发光唯一跨浏览器可靠的方案，但单层 0 0 10px #fff 只是灰雾，不是光晕。真正发光靠的是多层同中心、不同模糊半径的叠加：
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ff6600, 0 0 20px #ff0000;
- 所有偏移必须严格为
0 0，写成+0 +0在旧版 Safari 里可能失效 - 避免全用
#fff——易过曝、无层次；改用带色相的亮色（如橙红渐变） - 移动端慎用 >12px 的模糊值，iOS Safari 渲染不稳定，容易锯齿或闪烁
hover 动画要控制变量，别堆 keyframes
用 @keyframes 做霓虹闪烁时，频繁修改全部 4–5 层 text-shadow 或 box-shadow 值，重绘开销大，低端 Android 设备易卡顿。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 只动一两个变量：比如只让某一层的 blur-radius 在
15px和5px之间切换 - 或预设两组完整阴影值，用 CSS 自定义属性 +
transition切换（比 keyframes 更轻量） -
transition必须显式声明，例如transition: text-shadow 0.2s, box-shadow 0.2s;，否则 hover 无动画
移动端 :active 状态和触摸延迟必须单独处理
CSS :hover 在移动端基本无效（没有悬停概念），而 :active 又常因 300ms 触摸延迟导致反馈滞后。真实可用的交互反馈需：
- 监听
touchstart/touchend事件，手动切换 class（如is-pressed） - 用
pointer-events: none配合伪元素遮罩，规避 iOS Safari 的点击穿透 - 给
canvas发光按钮加-webkit-tap-highlight-color: transparent，禁用默认灰框
最易被忽略的是：父容器 overflow: hidden 会裁掉发光阴影，而文字颜色为 transparent 时 text-shadow 完全不显示——这两处检查比调参数更重要。
