流动边框本质是用linear-gradient创建背景边框，通过background-position位移实现视觉流动，不依赖border、不触发重排，性能优于outline或伪元素旋转；需配合background-size、background-clip等精确控制。
background-position 实现流动边框的原理
本质是用线性渐变做边框，再通过 background-position 移动背景图位置，制造“流动”错觉。不是真动画边框，也不依赖 border 属性——所以它不干扰盒模型、不触发重排，性能比 outline 或伪元素旋转更稳。
常见错误是直接给 border 加动画，结果发现 border-color 不支持关键帧过渡，或者用 box-shadow 模拟时边缘发虚、缩放失真。
- 必须用
background-image: linear-gradient铺四条边（或单条），不能靠border-image—— 兼容性差且难以控制位移节奏 - 要设
background-size精确匹配渐变长度，比如200% 200%才能平滑循环移动 -
background-clip: padding-box很关键，否则背景会盖住内容文字
最简可用代码模板（CSS-only）
下面这段能直接复制进项目，兼容 Chrome 84+、Firefox 75+、Safari 15.4+：
button {
position: relative;
padding: 12px 24px;
background: #fff;
color: #333;
border: none;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, transparent, #007bff, transparent);
background-size: 200% 200%;
animation: borderFlow 3s linear infinite;
z-index: -1;
}
@keyframes borderFlow {
0% { background-position: 0 0; }
25% { background-position: -100% 0; }
50% { background-position: -100% -100%; }
75% { background-position: 0 -100%; }
100% { background-position: 0 0; }
}
注意：这个写法只在元素有明确宽高（或内联尺寸）时生效；如果父容器 flex 布局下子项没设 width，动画可能“卡住不动”。
立即学习“前端免费学习笔记（深入）”；
这是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框，文本动画以及流光动画效果，各种效果都非常有创意。
适配不同形状和方向的边框流动
矩形边框默认走一圈，但圆角按钮、斜角标签、仅底部流动等需求很常见——这时不能硬套上面的 keyframes，得改 background-image 和位移逻辑。
- 只让底边流动：
background: linear-gradient(to right, transparent, #007bff, transparent)+background-size: 200% 1px+ 单向background-position: -100% 0 - 圆角元素加流动边框：必须设
background-clip: padding-box，否则渐变会在圆角处被裁掉一截 - 深色模式下颜色失效？别用
hsl()动画色值，改用color-mix()或 JS 监听prefers-color-scheme切换 class
移动端 Safari 的坑与绕过方案
iOS 15.4 之前，background-position 在 transform: scale() 或 will-change: transform 元素上会跳帧甚至卡死。这不是 bug，是 WebKit 对合成层背景动画的限制。
真实场景中容易踩中：比如按钮带点击缩放反馈，同时又加了流动边框，点一下就顿住。
- 绕过方式一：去掉
will-change，用transform: scale(0.98)触发硬件加速更轻量 - 绕过方式二：iOS 下降级为纯色边框动画（
@supports (-webkit-appearance: none)检测） - 千万别用
animation-play-state: paused控制启停——Safari 里 resume 后位移坐标会错乱
流动边框看着简单，但真正嵌进业务组件时，最麻烦的永远是和其他动效叠加时的时序冲突，还有设计师给的“流速”和开发实现的像素偏移对不上——建议把 animation-duration 抽成 CSS 变量，方便 UI 调整。
