真正可用的发光按钮需多层box-shadow逗号分隔、偏移值统一、模糊递增，配合协同text-shadow与bold字体，并用伪元素负偏移撑开光晕，避免错位、裁剪与渲染卡顿。
发光按钮不是加一层 box-shadow 或 text-shadow 就能搞定的，真正可用的发光效果必须分层控制、颜色适配背景、且避免渲染卡顿——否则在深色背景上亮得刺眼，换到白色背景就彻底消失，hover 时还掉帧。
多层 box-shadow 必须写在同一行，用逗号分隔
很多人复制代码后发光失效，是因为写了多个 box-shadow 声明，结果只有最后一行生效。CSS 只认最后一个同名属性声明。
- 错误写法：
box-shadow: 0 0 5px #0af; box-shadow: 0 0 15px #08f;→ 第二行覆盖第一行 - 正确写法：
box-shadow: 0 0 4px #0a8, 0 0 12px #0af, 0 0 24px rgba(0, 120, 255, 0.4); - 所有层偏移值必须一致（如全用
0 0），否则光晕错位，失去“同心发光”感 - 模糊半径建议递增但不过度：4px → 12px → 24px 足够，超过 32px 在多数设备上开始虚边
text-shadow 要和 box-shadow 协同，不能只靠它撑场子
文字发光不是装饰，是暗黑/透明按钮下唯一的光源。但直接套用 box-shadow 的参数会把字糊成一团。
- 文字阴影层数建议与主光层数一致（比如 3–4 层），但每层模糊值减 2–3px：
text-shadow: 0 0 2px #0a8, 0 0 6px #0af, 0 0 12px rgba(0,120,255,0.4); - 务必加
font-weight: bold或font-family: monospace，细字体在光晕下极易被吞没 - 禁用
text-shadow: inset—— 它让文字变凹陷，和发光逻辑冲突 - IE10 只支持单层
text-shadow，可用@supports not (text-shadow: 0 0 10px #000)做降级
伪元素光晕必须“撑开”，不能 width: 100% 硬套
很多教程让 ::before 直接设 width: 100%; height: 100%; top: 0; left: 0，结果光晕被按钮自身裁剪——尤其用了 border-radius 或 overflow: hidden 时，边缘直接断掉。
- 正确做法：伪元素尺寸略大于容器，用负偏移“撑开”范围，例如：
top: -6px; right: -6px; bottom: -6px; left: -6px; - 必须设
z-index: -1，否则遮盖文字或点击区域 -
filter: blur(12px)必须配合opacity控制，否则 hover 时会突然炸开一团模糊色块 - 别漏
content: ""和position: absolute，缺一伪元素就不渲染
动效优先用 transition，慎用 @keyframes 流光
想做流动光效（比如渐变色扫过按钮），@keyframes + background-position 是主流方案，但性能很敏感。
- 必须加
transform: translateZ(0)或will-change: background-position触发 GPU 加速，否则滚动时掉帧 - 避免在
:hover中同时触发动画 + 大量box-shadow变化，浏览器会反复重绘整个层 - 简单悬停增强（如光晕变大/变亮）优先用
transition: opacity, filter，比动画更轻量 - 流光动画的
background-size建议设为400%或800%，太小看不出流动感，太大动画节奏难控
最常被忽略的是背景适配——同一组参数在 background-color: #000 下炫酷，在 #fff 下可能完全不可见。调参时一定在两种极端背景下实时测试，别信“看起来亮就行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
