不用 border-image，真正可行的是用 background 模拟边框 + @keyframes 动画驱动线性渐变位移；需拆四边为独立 background 条带，精准设置方向、尺寸、background-origin/clip、background-position 四组值及周期匹配。
边框跑马灯用 border-image 还是 animation？
直接说结论：不用 border-image，它不支持动态渐变位移，兼容性差且难以控制节奏；真正可行的是用 background 模拟边框 + @keyframes 动画驱动线性渐变位移。本质是“视觉欺骗”——把四条边拆成四个独立的 background 条带，分别动画。
background 模拟边框的定位细节
必须用 background-origin: border-box 和 background-clip: border-box 确保背景贴合边框区域；否则动画会溢出或错位。每条边用一个 linear-gradient，方向和尺寸严格匹配：
- 上边：高度
2px，从左到右渐变（to right） - 右边：宽度
2px，从上到下（to bottom） - 下边：高度
2px，从右到左（to left） - 左边：宽度
2px，从下到上（to top）
四个 background 层叠顺序不能乱，否则动画衔接处会跳帧。
动画关键帧里 background-position 怎么设？
每个方向的位移值要对应其长度：上/下边用 background-position: 0 0, 100% 0, 0 0, 0 0 配合 background-size: 200% 2px 实现循环；左右边同理但交换坐标轴。常见错误是只写一个 background-position 值，结果四条边同步平移，看起来像整体滑动而非“跑马灯”。正确写法必须为四组值一一对应：
立即学习“前端免费学习笔记（深入）”；
background-position: 0 0, /* 上 */ 100% 0, /* 右 */ 0 0, /* 下 */ 0 100%; /* 左 */
移动端点击反馈和性能坑
跑马灯按钮在 iOS Safari 上常因 will-change: background-position 触发合成层失败，导致动画卡顿；解决方案是改用 transform: translateZ(0) 强制硬件加速，同时加 -webkit-tap-highlight-color: transparent 避免点击灰斑。另外，别给 :active 状态停掉动画——用户按住时边框突然静止会显得失真；建议只降低 opacity 或微调 scale。
最易被忽略的是：动画周期必须是四条边位移时间的公倍数，否则交接点会出现黑隙或重叠。比如每条边位移耗时 2s，总周期就得设成 4s 而不是 3s。
