纯 css 无法用 border-image 或 border 配合 @keyframes 实现真正路径式流动边框；需用 background + linear-gradient 模拟，通过 background-position 位移制造四边依次流动效果，兼容性好且无需 js；复杂路径则必须用 svg 的 stroke-dasharray 与 stroke-dashoffset 配合 js 动态计算长度。
border-image + @keyframes 无法直接实现流动边框？
直接用 border 配合 @keyframes 动画改颜色或宽度，本质是静态边框的属性变化，不是“描边流动”——也就是没有沿着路径方向移动的视觉效果。真正要模拟描边从起点到终点逐段浮现（比如 SVG 路径描边动画那种），纯 CSS 的 border 属性不支持路径控制，必须换思路。
用 background + linear-gradient 模拟流动边框
这是目前最轻量、兼容性好（Chrome 26+/Firefox 16+/Safari 6.1+）、无需 JS 的方案：把边框做成背景，用渐变位移制造“流动”错觉。
- 将元素的
border设为透明，用background模拟四条边（上/右/下/左） - 每条边用
linear-gradient创建 1px 宽色带，长度略大于边长（如 110%） - 在
@keyframes中用background-position沿指定方向平移渐变起点 - 动画时长和方向需匹配：比如上边框向右流动，就让渐变从左往右移；右边框向下流动，就让渐变从上往下移
div {
border: 2px solid transparent;
background:
linear-gradient(to right, #3b82f6, #3b82f6) top,
linear-gradient(to bottom, #3b82f6, #3b82f6) right,
linear-gradient(to left, #3b82f6, #3b82f6) bottom,
linear-gradient(to top, #3b82f6, #3b82f6) left;
background-size: 110% 2px, 2px 110%, 110% 2px, 2px 110%;
background-repeat: no-repeat;
animation: borderFlow 3s linear infinite;
}
@keyframes borderFlow {
0% { background-position: -10% 0, 100% -10%, 110% 100%, 0 110%; }
100% { background-position: 100% 0, 100% 100%, -10% 100%, 0 -10%; }
}
为什么不用 border-image-slice 或 mask？
border-image 确实能加载渐变图，但 border-image-slice 不支持动画，且无法控制“流动方向”；mask 方案虽灵活，但 Safari 对 mask-border 支持极差（至今无），且需要额外 SVG 或渐变资源，维护成本高。相比之下，background 方案一行 background-position 就能驱动四边，更可控。
- 注意
background-size必须显式设为具体像素值（如2px），不能用100%，否则流动会拉伸失真 - 动画起始/结束位置要错开，否则四边会在同一帧同时“闪现”，失去连续流动感
- 如果元素有圆角（
border-radius），此方案会露出直角背景边，需配合overflow: hidden或改用 SVG
真正需要路径级描边动画？该切 SVG + stroke-dasharray
当你要实现不规则形状、文字描边、或精确控制起始偏移（比如只描半圈），CSS 背景方案就力不从心了。这时必须用 SVG：stroke-dasharray + stroke-dashoffset 是唯一可靠路径描边动画机制。
- 先用
getTotalLength()获取路径总长（JS 辅助），设为dasharray和初始dashoffset - 动画中递减
dashoffset，让虚线“向前推进” - CSS 中只能写死数值，所以动态内容必须用 JS 注入，否则长度算不准
- 别忘了加
stroke-linecap: round避免尖角突兀
复杂点不在写法，而在对“路径长度”和“偏移方向”的理解——很多人卡在 offset 初始值设太大或太小，导致动画不动或反向闪动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
