必须用 border-image + conic-gradient(from var(--rotate)) 实现可动画流光边框，因仅 border-image 能响应 CSS 变量变化并强制重绘渐变；其他方式如 background 或 mask 中的 from var(--rotate) 为静态快照，动画时不更新。
只能用 border-image + conic-gradient(from var(--rotate)) 实现真正可动画的流光边框；其他方式（background、mask、伪元素旋转）要么卡死、要么断层、要么被裁剪。
为什么 conic-gradient(from var(--rotate)) 必须配 border-image
浏览器只在 border-image 上响应 CSS 变量变化并强制重绘整个渐变边框；background 或 mask 中的 from var(--rotate) 是静态快照，动画时不会更新——哪怕你写了 @keyframes 改变量，它也纹丝不动。
-
border-image天然绑定边框盒模型，缩放、圆角、响应式下都不错位 - 漏掉
border: 4px solid transparent→ 边框直接消失（没载体） - 漏掉
border-image-slice: 1→ 渐变被切成四块，出现明显接缝 - 首尾色必须相同（如
#ff0000, #00ff00, #0000ff, #ff0000），否则循环处颜色跳变
--rotate 变量写法的硬性要求
变量名拼错、单位缺失、作用域错误，都会让动画卡在初始角度不动，且无任何报错提示。
- 必须显式带单位：
--rotate: 0deg，不能写--rotate: 0 - 变量需在元素自身或
:root声明，子元素无法继承未声明的变量 -
@keyframes中必须写完整值：0% { --rotate: 0deg; } 100% { --rotate: 360deg; } - 不要混用
transform: rotate(var(--rotate))—— 它和conic-gradient的起始角无关
常见失败现象与对应排查点
看到边框静止、全黑、色块突变、接缝明显？别猜，按顺序核对这几项：
- 控制台检查是否报
Invalid property value→ 很可能是--rotate缺单位或变量名错 - 边框完全不显示 → 检查
border: 4px solid transparent是否遗漏 - 边框有四段色带、中间断开 →
border-image-slice: 1没写，或写了border-image-repeat干扰了拉伸 - 动画只跑半圈就停 →
conic-gradient首尾色不同，或@keyframes里漏了100%终点
最易被忽略的是：变量动画依赖浏览器对 @keyframes 中自定义属性变更的支持，Chrome 110+、Firefox 115+、Safari 16.4+ 才稳定；旧版本即使语法全对，也会静默回退。别在调试时假设“代码没问题，肯定是浏览器兼容性问题”——先确认运行环境版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
