最稳纯css流光边框方案是用border-image配合线性渐变与animation位移，需显式设置border-width、border-image-slice:1，动画方向与渐变方向一致，时长2.5s–4s。
用 CSS animation + border-image 实现流光边框最稳
纯 CSS 就能做，不需要 JS；关键不是“加光”，而是让渐变色在边框上滚动起来。主流做法是用 border-image 配合线性渐变和 animation 位移，比伪元素叠加或 box-shadow 模拟更干净、更易控制宽度和圆角。
常见错误是直接给 border 设颜色再动画——CSS 不允许直接动画 border-color 的渐变过程，会卡顿或失效。
- 必须用
border-image，且渐变方向与动画方向一致（例如左→右流光，就用to right） -
border-width要显式设置，否则border-image不生效 - 动画时长建议 2.5s–4s，太快像闪烁，太慢没动感
- 记得加
border-image-slice: 1，否则渐变会被裁切掉
button {
border: 4px solid;
border-image: linear-gradient(90deg, #6a11cb, #2575fc, #00c9ff) 1;
border-image-slice: 1;
animation: borderShine 3s linear infinite;
}
@keyframes borderShine {
0% { border-image-source: linear-gradient(90deg, #6a11cb, #2575fc, #00c9ff); }
100% { border-image-source: linear-gradient(90deg, #2575fc, #00c9ff, #6a11cb); }
}
兼容性差的写法：用 ::before 伪元素模拟流光（慎用）
这个方案在 Safari 15.4 之前不支持 border-image 动画时被广泛采用，但现在已非首选。它本质是盖一层带渐变的绝对定位伪元素，靠 transform: translateX() 移动制造流动感。
问题明显：圆角对不齐、响应式下偏移错位、按钮有内边距时流光被遮挡、z-index 管理麻烦。
- 必须设
position: relative在按钮上，否则伪元素定位失准 - 伪元素的
width和height要严格匹配边框区域，推荐用inset: 0+border: 4px solid transparent模拟 - 动画用
transform而非left，避免重排 - 移动端 touch 事件可能穿透到伪元素，需加
pointer-events: none
background-position + border 组合的轻量替代方案
如果只要简单流光、不强调“边框专属感”，可以用背景渐变覆盖边框区域。原理是把按钮背景设成宽幅渐变条，再用 background-size 控制重复单元，靠 background-position 横向滚动。
优点是兼容性极好（IE10+），代码少；缺点是流光看起来像“从按钮内部透出来”，而非真正贴着边框走。
- 设置
padding保证文字不贴边，否则流光会被内容遮住 -
background-size建议设为200% 100%，这样一次动画刚好完成一个完整循环 - 别忘了加
background-clip: padding-box，防止渐变溢出圆角
button {
border: 4px solid transparent;
background: linear-gradient(90deg, #6a11cb, #2575fc, #00c9ff, #6a11cb);
background-size: 200% 100%;
background-clip: padding-box;
animation: bgShift 3s ease-in-out infinite;
}
@keyframes bgShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
移动端真机调试时最容易忽略的三个点
iOS Safari 对 border-image 动画的支持直到 iOS 16.4 才完全稳定；安卓 Chrome 大部分版本没问题，但低端机可能掉帧。实测下来，以下三点不检查，80% 的“流光不跑”问题就出在这儿：
- 没加
-webkit-mask或mask时，Safari 可能渲染空白边框——临时补一句-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)可绕过 - 按钮用了
outline: none却没配:focus-visible，键盘用户 tab 到按钮时流光消失，体验断裂 - 动画触发依赖 hover，但移动端没有 hover 状态——必须加
:active或用 JS 监听touchstart补一帧动画启动
流光效果本身不难，难的是在各种屏幕、系统、交互模式下保持一致表现。别只盯着“怎么动起来”，先确保它在 iPhone 上点一下就亮、在折叠屏上缩放不撕裂、在暗色模式下不发灰——这些才是上线前真正卡人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
