直接用border做流动动画基本不可行；因border-color和border-image均不支持平滑位移动画，Safari会忽略、Firefox易闪烁，必须改用四层background模拟边框并独立控制background-position位移实现循环流动效果。
直接用 border 做流动动画基本不可行——浏览器不支持对 border-color 或 border-image 做平滑、可控的位移动画，你写的 @keyframes 很可能在 Safari 里完全不动，在 Firefox 里闪一下就停。
为什么 border-image 动不了
常见错误现象：border-image: linear-gradient(...); animation: move 3s infinite; 写了但边框静止，或只在页面加载时闪一次。
-
border-image不是可动画属性，background-position对它无效 - Safari 完全忽略对
border-image-source的动画尝试 - 旧版 Edge 对
border-image-slice: 100%渲染异常，必须写成1 - 加了
border-radius后，Safari 会裁掉渐变边缘，得补overflow: hidden
用 background 模拟四边流动最稳
核心思路：放弃 border，用四层 background 分别画上/右/下/左四条细边，每层独立控制 background-position 位移方向，形成循环跑马灯效果。
- 上边：用
linear-gradient(90deg, ...)+top / 200% 4px - 右边：用
linear-gradient(0deg, ...)+right / 4px 200% - 下边：用
linear-gradient(270deg, ...)+bottom / 200% 4px - 左边：用
linear-gradient(180deg, ...)+left / 4px 200% -
background-size必须远大于元素尺寸（如200% 200%），否则位移过程会露白 - 务必加
background-clip: padding-box，避免背景盖住文字
矮按钮（40px 高）环形流动失真怎么修
用 conic-gradient 做旋转光边时，40px 高按钮常出现断续、边缘留白、光带跳帧——不是代码写错了，是视觉密度压缩导致的失配。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：
conic-gradient生成的扇区在小尺寸下被拉伸，旋转时无法均匀覆盖四边 - 不要调宽高，改用
transform: scale(1.2)主动补偿（值按实际高度微调） - 把
scale()和rotate()合并在同一个transform声明里，避免触发重排 - 加
will-change: transform提示浏览器启用 GPU 加速（仅限动画频繁场景）
伪元素方案适合需要悬停触发的按钮
如果只想鼠标移上去才动，用 ::before 或 ::after 最灵活，不依赖背景层叠顺序，也容易做圆角适配。
- 按钮本体设
position: relative，伪元素position: absolute全覆盖 - 伪元素用
clip-path: inset(0)或overflow: hidden裁出边框区域 - 动画用
transform: rotate()+background: conic-gradient()，比纯border更可控 - 注意
z-index：伪元素默认在内容下方，要加z-index: -1或调整层级 - 移动端记得加
prefers-reduced-motion: reduce查询，关掉动画
真正难的不是写出第一版动效，而是让同一段 CSS 在 iOS 15+、Chrome 120+、Edge 119+ 下都保持节奏一致、不撕裂、不卡顿——往往要为 Safari 单独加 -webkit-mask 回退，或给矮按钮多套一层 scale() 补偿。这些细节不测到真机，光看 DevTools 是发现不了的。
