不能直接用 border 配合 conic-gradient，因为 border-color 不支持渐变，必须用 border-image；需设 border-image-slice: 1、首尾同色、显式声明 --rotate 变量并带单位（如 0deg），且在 @keyframes 中手动赋值才能触发重绘动画。
为什么不能直接用 border 配合 conic-gradient
因为 border-color 不支持渐变，border-image 才是唯一能承载 conic-gradient 并响应角度变化的边框载体。你写 border: 4px solid transparent 只是占位，真正起作用的是后面接的 border-image；漏掉这行，边框就彻底消失。
border-image 必须带 slice: 1 和首尾同色
不加 border-image-slice: 1，浏览器会把 conic-gradient 按默认的 25% 切成四块，四个角出现明显断层；首尾颜色不同（比如 #ff0080 开头、transparent 结尾）会导致旋转到衔接点时色带跳变或露白。正确写法是：
.shiny {
border: 4px solid transparent;
border-image: conic-gradient(from var(--rotate, 0deg), #ff0080, #ff0080 30deg, transparent 30deg, transparent) 1;
}
-
--rotate必须显式声明初始值，单位为deg或turn（如0deg或0turn） - 动画关键帧里只更新变量值，不要写
transform: rotate()—— 那跟渐变起始角无关 - 避免用
border-image-repeat，默认stretch就够了；设成repeat会让色带在边框上重复错位
变量驱动动画必须靠 @keyframes 显式赋值
浏览器不会自动插值 CSS 自定义变量，@keyframes 里必须手动写每个关键帧的变量值，否则动画卡死或回退到默认值。常见错误是父元素没定义变量，子元素却在动画里引用 var(--rotate)，结果渐变静止或突变。
- 变量要在目标元素上声明：
element { --rotate: 0deg; animation: spin 3s linear infinite; } -
@keyframes spin { from { --rotate: 0deg; } to { --rotate: 360deg; } }—— 这样才能触发重绘 - 反向旋转写
to { --rotate: -360deg; }，别依赖animation-direction: reverse，它不参与变量计算
圆角、缩放、响应式下最容易失效的点
border-image 是唯一原生绑定盒模型的方案，但它对圆角和缩放依然敏感：如果容器有 border-radius，而 border-image 的渐变中心没对齐，转角处光效会偏移或断裂；缩放时若未配合 will-change: transform，部分安卓 WebView 会出现重绘延迟或闪烁。
- 确保
border-radius值与设计稿完全一致，哪怕差0.5px都可能让流光在圆角起点“跳帧” - 在动画元素上加
will-change: transform，提前告知浏览器优化渲染路径 - 真要兼容 Safari 15.4 以下，只能退回到
linear-gradient + background-position四段位移，但得接受交界处无法自然衔接
deg，或者把 --rotate 放在 :root 却没在组件内重声明，动画就无声无息地挂了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
