在HTML中设计边框跑马灯效果按钮的说明-html教程-PHP中文网

不用 border-image，真正可行的是用 background 模拟边框 + @keyframes 动画驱动线性渐变位移；需拆四边为独立 background 条带，精准设置方向、尺寸、background-origin/clip、background-position 四组值及周期匹配。

在html中设计边框跑马灯效果按钮的说明

边框跑马灯用 `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 层叠顺序不能乱，否则动画衔接处会跳帧。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

动画关键帧里 `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。