虚幻外发光必须用伪元素+渐变背景+模糊滤镜+位移动画实现，box-shadow无法模拟方向性、渐变和动态感；核心是button::before绝对定位、linear-gradient背景、blur(10px)、background-size 400%及glowMove动画。
虚幻外发光（即非真实光源模拟、带模糊/渐变/动态感的高亮边框）不能靠 box-shadow 简单叠加实现，必须组合伪元素、滤镜和动画。直接写 box-shadow: 0 0 20px #00f 只会得到呆板光晕，不是“虚幻”感。
用 ::before 伪元素 + filter: blur() 模拟外发光层
核心思路是：在按钮外再画一层略大的渐变轮廓，然后用模糊让它“虚化”。纯 box-shadow 无法控制形状或方向，而伪元素可以自由定位和变形。
-
::before必须设position: absolute，且top/left/bottom/right均设为-5px（数值根据期望发光厚度调整） -
background-image推荐用linear-gradient而非单色，否则边缘生硬；background-size: 400%是后续动画前提 -
filter: blur(12px)是关键——值太小（如4px）像描边，太大（如30px）会吞噬按钮本身 - 务必加
z-index: -1，否则伪元素会盖住文字或点击区域
为什么 box-shadow 单独用达不到“虚幻”效果
box-shadow 的模糊半径是高斯模糊，但它是从元素边缘向四周均匀扩散，无法形成方向性流动感或色彩渐变过渡。它适合静态高亮，不适合模拟霓虹灯管、能量场、魔法光效这类有“呼吸感”或“流向感”的发光。
- 多层
box-shadow（如0 0 10px #f0f, 0 0 20px #0ff）看起来像叠了两圈光，但仍是同心圆，缺乏动态张力 - 移动端 Safari 对多层
box-shadow的渲染性能较差，容易掉帧 - 无法配合
@keyframes实现背景位移动画，也就做不出流光扫过的效果
实现流光扫过式虚幻外发光的最小必要代码
真正让发光“活起来”的是背景位移动画，不是单纯加光。下面这段是可直接粘贴运行的最小闭环：
立即学习“前端免费学习笔记（深入）”；
button {
position: relative;
background: #111;
color: #fff;
border: none;
padding: 12px 32px;
border-radius: 8px;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: -6px; left: -6px; bottom: -6px; right: -6px;
border-radius: 12px;
background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ff00cc);
background-size: 400% 400%;
z-index: -1;
filter: blur(10px);
animation: glowMove 6s linear infinite;
}
@keyframes glowMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
注意：background-position 动画必须用百分比，不能用 px；border-radius 在伪元素上要略大于按钮本体，否则发光边缘会被裁切。
最容易被忽略的是 overflow: hidden ——如果按钮父容器没设这个，或者按钮自身没设，伪元素的模糊光晕会溢出到页面其他区域，导致布局错乱或性能下降。虚幻感来自可控的“溢出”，不是失控的“泄露”。
