纯css动态炫光边缘按钮需用::before伪元素叠加渐变背景并应用filter: blur()模拟辉光，关键点包括：设position: absolute、z-index: -1及外扩定位；background-size至少200%且与background-position配对动画；必须加background-clip: padding-box防溢出；animation-fill-mode: forwards保停留态；safari兼容需补全keyframes并用transform: translatez(0)替代will-change。
纯 CSS 就能做出动态炫光边缘按钮，不需要 JS，但必须用对伪元素、渐变、background-position 和 animation-fill-mode 这几个关键点；否则光效会闪一下就断，或在 Safari 里直接不跑。
用 ::before 叠加发光层并模糊
炫光边缘本质不是边框动画，而是用伪元素画一个比按钮略大的渐变背景，再套 filter: blur(20px) 模拟辉光。注意三点：
-
::before必须设position: absolute、z-index: -1，且宽高要覆盖按钮外扩 5–10px（比如top: -8px; left: -8px; right: -8px; bottom: -8px） - 渐变方向要和动画位移方向一致，例如
linear-gradient(90deg, #00c9ff, #92fe9d)配合background-position: -200% 0→100% 0才能横向流动 -
filter: blur()值别超过25px，否则在低配设备上掉帧，iOS Safari 对大于15px的 blur 渲染不稳定
background-size 和 background-position 必须配对动
只改 background-position 不生效？大概率是漏了 background-size。流光靠的是“大背景在小容器里平移”，所以：
- 设
background-size: 300% 300%（至少 200% 以上），让渐变色带足够长 -
background-position初始值写成0% 0%，动画终点写成100% 100%或-200% 0（取决于方向） - 必须加
background-clip: padding-box，否则圆角按钮的模糊光会溢出到 border 外，造成毛边
动画卡住/闪退？检查 animation-fill-mode 和 Safari 兼容写法
鼠标一移开，光效立刻回弹——这是没设 animation-fill-mode: forwards。更隐蔽的问题在 Safari：
- 仅写
animation: glow 4s infinite在 Safari 中可能不触发，得补全所有关键帧属性，哪怕起始值和默认一样：@keyframes glow { from { background-position: 0% 0%; transform: translateZ(0); } to { background-position: 100% 100%; transform: translateZ(0); } } - Safari 对
will-change: background-position支持差，换成will-change: transform+transform: translateZ(0)更稳 - 如果按钮本身有
border-radius，::before的border-radius必须和它完全一致，否则模糊层边缘会露白
真正难调的不是动效本身，而是不同浏览器对 filter 和 background-clip 的解析差异；建议在真机 Safari 和 Chrome for Android 上各测一次，别只信桌面预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
