用box-shadow多层逗号分隔实现霓虹外发光，text-shadow同步增强文字自发光，背景需深色，hover仅过渡模糊值防卡顿，并注意可读性合规。
直接用 box-shadow 多层叠加就能实现按钮外发光霓虹效果，但写错格式或忽略渲染逻辑，结果就只剩一层光晕——不是“霓虹”，是“描边”。
box-shadow 多层写法必须用逗号分隔，不能重复声明
浏览器只认最后一个 box-shadow 属性声明，前面的会被覆盖。这是最常踩的坑。
- 错误写法：
box-shadow: 0 0 5px #f0f;然后另起一行再写box-shadow: 0 0 10px #0ff;→ 只有第二层生效 - 正确写法：
box-shadow: 0 0 5px #f0f, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #00f; - 每层之间必须用英文逗号隔开，换行不加分隔符会直接报 CSS 语法错误
- 所有层偏移值（前两个数值）必须一致，比如全用
0 0，否则光晕错位，失去“同心发光”感
text-shadow 必须同步加，否则文字边缘发硬
纯 box-shadow 只包住按钮容器，文字本身没光。真实霓虹是灯管透光，文字也要“自发光”。
-
text-shadow层数和颜色建议与box-shadow对应，但模糊半径可略小（比如同值减 2–3px），避免文字糊成一团 - 示例：
text-shadow: 0 0 3px #f0f, 0 0 8px #0ff, 0 0 13px #0ff, 0 0 18px #00f; - 如果按钮背景是
transparent或无色，text-shadow就是唯一光源，此时更不能省 - 字体建议加
font-weight: bold或用font-family: monospace，细字体撑不起霓虹的厚重感
hover 动画卡顿？多半是阴影扩散范围失控
对多层大模糊值的 box-shadow 直接做 transition，浏览器要实时重绘大片透明区域，掉帧很常见。
- 优化方案：只过渡
box-shadow的模糊值（如从0 0 10px→0 0 80px），别动颜色或透明度 - 避免在
:hover里一次性堆 6–8 层阴影，旧版 Safari 可能渲染异常或抖动 - 移动端记得补
:active状态，否则触摸反馈延迟明显；iOS 系统级“降低透明度”设置会削弱发光强度，需实机验证 - 深色背景（如
#0a0a1a）是刚需，浅底上霓虹基本不可见
最容易被忽略的是对比度合规性：发光越强，文字实际可读性越低。Chrome DevTools 的 Accessibility 面板里点「Contrast」查真实值，别信肉眼感觉——很多“酷炫”效果一测就不及格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
