真正有质感的发光按钮需分层控制：主体+伪元素内/外光晕，配合filter: blur()与负偏移定位，避免text-shadow浮肿、box-shadow失效，兼顾z-index、圆角同步、硬件加速及背景色适配。
纯 CSS 就能做出真正有质感的发光按钮，不需要 JS、不依赖第三方库，关键在 box-shadow、filter: blur() 和伪元素的配合使用——但多数人一上来就堆 text-shadow 或滥用 glow 类名，结果光晕发虚、边缘糊成一片、动效卡顿。
为什么直接加 text-shadow 或 box-shadow 不够用
单独给文字加多层 text-shadow: 0 0 5px #fff, 0 0 10px #fff 只会让字体“浮肿”，没有立体光晕感；而给按钮加单层 box-shadow: 0 0 20px #0af 在深色背景上勉强可用，但换到浅色背景立刻失效，且无法控制光晕扩散形状。
- 真正可控的发光必须分层：主体（按钮内容）、内光晕（
::before模拟高光折射）、外光晕（::after模拟散射） -
filter: blur(12px)必须配合opacity动态控制，否则 hover 时会突然炸开一团模糊色块 - 所有发光层的
z-index要严格错开，否则伪元素会遮盖文字或点击区域
::before 和 ::after 的尺寸与定位陷阱
很多教程让伪元素直接设 width: 100%; height: 100% 并加 top: 0; left: 0，这会导致光晕被按钮自身裁剪（尤其用了 overflow: hidden 或圆角时）。正确做法是让伪元素略大于容器，并用负偏移“撑开”发光范围。
- 推荐写法：
top: -10px; right: -10px; bottom: -10px; left: -10px;，再配border-radius: calc(30px + 10px) - 如果按钮本身是
border-radius: 30px，伪元素圆角必须同步加大，否则光晕边缘会露直角 - 务必加
content: ""和position: absolute，漏掉任一都会导致伪元素不渲染
性能敏感点：animation vs transition
想做“流动光效”（比如渐变色扫过按钮），用 @keyframes + background-position 是主流方案，但注意：动画层若没启用硬件加速，滚动时会掉帧。
- 必须加
transform: translateZ(0)或will-change: background-position触发 GPU 渲染 - 避免在
hover中同时触发动画和大量box-shadow变化，浏览器会反复重绘整个层 - 简单悬停发光优先用
transition：比如只过渡opacity和filter: blur()，比动画更轻量
最易被忽略的是颜色适配性——一套发光参数在黑色背景上炫酷，在白色背景上可能完全不可见。上线前务必在 background-color: #fff 和 background-color: #000 下分别测试 box-shadow 的 rgba 值和模糊半径，别迷信“看起来亮就行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
