border-image 不可动画，需用双层 background 模拟渐变边框：外层 linear-gradient 配 background-clip: padding-box 和 background-position 动画实现流动效果，兼容性好且性能优。
用 @keyframes 动画控制 border-image 渐变边框行不通
直接改 border-image 的渐变色在动画里不生效，浏览器不支持对这个属性做插值过渡。你看到的“不动”不是写错了，是 CSS 规范本身限制——border-image 属于非可动画属性。
真正能动的是 background，所以得绕开边框本身，用背景模拟“边框效果”：
- 给按钮加一层
background: linear-gradient(...)作为外层“视觉边框” - 用
padding留出边框空间，再用内层background填充按钮主体色 - 动画只驱动外层渐变的
background-position或background-size
用双层 background 实现可动画的“伪边框”
核心思路：把边框做成一个环形渐变背景，通过位移制造流动感。不需要额外 DOM 元素，纯 CSS 可控。
示例代码（带注释）：
button {
position: relative;
padding: 12px 24px;
background: #0f172a; /* 按钮本体色 */
color: #e2e8f0;
border: none;
overflow: hidden;
<p>/<em> 外层渐变“边框”：用 background 实现 </em>/
background:
linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899, #06b6d4, #6366f1)
border-box;
background-clip: padding-box;
background-origin: border-box;</p><p>/<em> 关键：让渐变动起来 </em>/
animation: borderRotate 6s linear infinite;
}</p><p>@keyframes borderRotate {
to {
background-position: 200% 200%;
}
}</p>
注意：background-clip: padding-box 是关键，它让渐变只显示在 padding 区域（即你想要的“边框位置”），不会盖住文字。
background-position 动画比 transform 更稳
有人试过用 transform: rotate() 套壳来转整个按钮，但会引发文字模糊、锯齿、GPU 占用高，尤其在 Safari 上容易闪屏。
用 background-position 移动渐变更轻量，兼容性也好（Chrome/Firefox/Safari 均支持）：
- 动画只触发合成层重绘，不触发布局或重排
- 避免
transform导致的子元素旋转（比如图标、文字被带歪） - 如果想调速，直接改
animation-duration，不用算角度或时间函数
移动端真机上 border-image 动画仍可能失效
哪怕你用各种 hack 强行让 border-image 在桌面端看起来“动了”，iOS Safari 和部分安卓 WebView 依然会静止——这不是 bug，是渲染引擎主动降级处理。
所以别赌兼容性，老实用双背景方案。如果需要适配暗色模式或主题切换，只需替换 linear-gradient 里的颜色值，其他逻辑完全复用。
最常被忽略的一点：动画起始位置没设 background-position: 0 0，导致第一次播放有跳变。记得显式声明初始值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
