用 background 模拟边框是实现流动彩虹边框的唯一兼容方案；因 border-image 不支持可靠动画，需用四层渐变背景配合错位位移 animation 实现上→右→下→左循环流动，注意 background-size、background-position 与角度匹配及移动端性能优化。
直接用 border-image + linear-gradient 做静态彩虹边框最省事；要做流动动画，必须放弃原生 border，改用 background 模拟边框并配合 animation 位移——这是唯一兼容性好、可控性强的方案。
为什么 border-image 无法实现真正“流动”的彩虹边框
border-image 的动画支持极差：CSS 动画不能直接作用于 border-image-source 或 border-image-slice，background-position 对它也无效。你可能会试 @keyframes 改 border-image 值，但结果是 Safari 不渲染、Firefox 闪烁、Chrome 部分帧丢弃——本质是浏览器没把这当成可动画属性。
常见错误现象：border-image: linear-gradient(...); animation: move 3s infinite; 写了但完全不动，或只在首次加载闪一下。
- 必须搭配
border-width和border-style: solid才能显示，漏掉任一就会边框消失 -
border-image-slice: 1是安全值，用100%在旧版 Edge 中可能失效 - 圆角（
border-radius）与border-image共存时，Safari 会裁切渐变边缘，需加overflow: hidden补救
用 background 模拟边框实现可动画彩虹跑马灯
核心思路：不用 border，而用四层 background（上/右/下/左）分别绘制细条状渐变，并通过 background-position 错位位移制造循环流动感。每层背景对应一条边，独立控制位移方向和速度。
关键参数差异：background-size 要设为比元素尺寸大得多（如 200% 200%），否则位移会露白；background-repeat: no-repeat 防止重复撕裂；background-clip: padding-box 确保不覆盖内容。
div.rainbow-border {
position: relative;
width: 300px;
height: 200px;
background:
linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) top / 200% 4px no-repeat,
linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet) right / 4px 200% no-repeat,
linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet) bottom / 200% 4px no-repeat,
linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet) left / 4px 200% no-repeat;
animation: borderRun 6s linear infinite;
}
@keyframes borderRun {
0% { background-position: 0 0, 0 0, 0 0, 0 0; }
25% { background-position: -100% 0, 0 0, 0 0, 0 0; }
50% { background-position: -100% 0, 0 -100%, 0 0, 0 0; }
75% { background-position: -100% 0, 0 -100%, 0 -100%, 0 0; }
100% { background-position: -100% 0, 0 -100%, 0 -100%, 0 -100%; }
}
- 每条边的渐变角度必须匹配流向（上边用
90deg，右边用0deg，依此类推） -
background-size宽高值要反着写：水平边用200% 4px（宽拉长、高固定），垂直边用4px 200% - 动画帧数越多越顺滑，但超过 4 帧后维护成本陡增，建议严格按上→右→下→左顺序分段
移动端适配与性能陷阱
在 iOS Safari 上，background-position 动画容易卡顿，尤其当父容器有 transform 或 will-change 时。这不是代码错，是 WebKit 渲染管线对多层背景位移优化不足。
- 避免同时给同一元素加
transform和多层background动画 - 用
will-change: background-position可能反而更卡，实测不如不用 - 真要保帧率：把动画拆到伪元素
::before上，主元素只负责定位，减少重绘区域 - 如果边框只需单向流动（比如只沿顶部跑），就只启用一层背景+动画，别硬套四边全动方案
真正难的不是写出第一版动画，而是让四条边在不同屏幕缩放、不同 DPR 下严丝合缝地接续——background-size 和 background-position 的百分比计算必须基于 content-box，且不能依赖视口单位（vw 会随滚动抖动）。动手前先在 iPhone 和 Chrome 设备模拟器里连按三次刷新键，看有没有接缝跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
