border-image + conic-gradient 是唯一稳定支持变量驱动旋转、无断层的方案；background-position 仅适用于单向扫光，因四边交界无法衔接且 Safari 动画插值不稳定；mask 和 transform 伪元素存在重绘失效、对齐失真、裁切中断等问题。
直接用 border-image + conic-gradient 是目前唯一能稳定跑通、无断层、支持变量驱动旋转的方案；其他方法（比如 background-position、mask、伪元素绕边）要么有视觉接缝，要么动画卡死，要么不响应角度变化。
为什么 background-position 方案只适合“单向扫光”，不适合“环绕边框”
它本质是把一条水平渐变条拉宽后平移，靠位移制造“光扫过”的错觉。但四边交界处无法自然衔接——顶部扫完、右侧开始时总有一段空白或重叠，尤其在圆角容器上更明显。想模拟环绕，得叠加至少两个伪元素并手动对齐关键帧，维护成本高、缩放失真、且 Safari 对 background-position 动画插值支持不稳定。
常见错误现象：background-position: -100% 0 到 200% 0 动画一跑，光条在右下角“跳帧”或消失；设 border-radius 后，光效被裁切、边缘发虚。
使用建议：
立即学习“前端免费学习笔记（深入）”；
- 仅用于矩形按钮、无圆角、且只需左→右或上→下单向流光的场景
- 必须用
::before或::after伪元素承载，主元素保持border: none -
background-size至少设为200% 200%，否则位移范围不够 - 动画时长控制在
2s～3s，linear缓动比ease更匀速
border-image + conic-gradient 的最小可行结构
这个组合是目前唯一能让 from var(--rotate) 实时生效的路径。浏览器只有在 border-image 上检测到变量变更，才会强制重绘整个边框纹理；background 和 mask 都做不到这点。
容易踩的坑：
- 漏写
border: 4px solid transparent→ 边框直接不显示（border-image没载体） - 漏写
border-image-slice: 1→ 渐变被切成四块，四个角出现明显接缝 - 把
conic-gradient写在background里再套animation: rotate→ 动画无效，因为transform旋转的是元素本身，不是渐变起始角 - 首尾颜色不同（如
#ff0080开头、transparent结尾）→ 旋转时出现色带断裂
可运行代码片段：
.shiny {
border: 4px solid transparent;
border-image: conic-gradient(from var(--rotate, 0deg), #ff0080, #ff0080 30deg, transparent 30deg, transparent) 1;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to { --rotate: 360deg; }
}
mask 和 transform 伪元素方案为什么不可靠
mask 不支持动画化渐变角度——你改 --rotate，浏览器根本不重绘 mask-image，结果就是边框静止或全黑。即使加上 mask-composite: add，也绕不过这个底层限制。
用伪元素 + transform: rotate() 模拟流光，看似简单，实际问题集中在这三点：
- 伪元素必须严格覆盖边框区域，但
inset: -2px这类写法在不同缩放比例下会偏移 - 圆角容器中，旋转后的伪元素边缘和真实边框圆角无法对齐，出现“露底”或“压边”
- 当父容器有
overflow: hidden，旋转伪元素可能被裁切，光效突然中断
这类方案适合快速原型验证，但上线前务必在 Chrome/Firefox/Safari 三端实测圆角、缩放、深色模式下的表现。
真正要上线的项目，别碰 mask 或纯 transform 伪元素；border-image 结构看着啰嗦，但它把“边框纹理”这件事交给了浏览器原生渲染管线，只要写对那几行关键声明，后续改色、调速、加响应式变量，都不用动布局逻辑。
