不能直接用border实现旋转类边框动画，因border不支持渐变和transform旋转；需用linear-gradient模拟边框并配合background-position平移，或用conic-gradient+@property实现真正旋转流光效果。
不能直接用 border 实现旋转类边框动画 —— 它不支持渐变，也不支持 transform 旋转生效。必须用 background-image + linear-gradient 模拟边框，再靠 background-position 或容器旋转来制造“动起来”的错觉。
为什么 linear-gradient 边框不能直接 rotate()
你给一个 ::before 元素设了 background: linear-gradient(45deg, red, blue)，再加 transform: rotate(10deg)，结果发现：整个元素转了，但渐变方向没变，边框看起来还是歪的、断裂的。这是因为 linear-gradient 的角度是相对于元素坐标系固定的，不是随 transform 动态重算的。
-
linear-gradient(45deg, ...)中的45deg是静态计算一次，不会响应transform - 想让“渐变边框”真正旋转，得用
conic-gradient（圆锥渐变）+animation，或者用background-position平移模拟运动 - 用
rotate()去转容器本身，再配合backface-visibility: hidden和will-change: transform可减少抖动，但仍是障眼法
用 background-position 实现“流动边框”动画
这是最稳定、兼容性最好（IE10+）、且性能开销低的做法：把四条边拆成四个 linear-gradient 背景图层，分别控制它们的 background-position，形成循环平移效果。
- 上边：
linear-gradient(to right, #655, transparent)，background-position: 0 0→100% 0 - 右边：
linear-gradient(to bottom, #655, transparent)，background-position: 100% 0→100% 100% - 下边：
linear-gradient(to left, #655, transparent)，background-position: 100% 100%→0 100% - 左边：
linear-gradient(to top, #655, transparent)，background-position: 0 100%→0 0 - 关键点：
background-size要设成刚好覆盖单边宽度（如4px 2px），否则平移会错位 - 动画必须用
infinite linear，否则停顿明显；起始和结束帧要严格对齐，否则跳帧
conic-gradient + animation 实现流光旋转边框
如果真要“旋转”，conic-gradient 是唯一正解。它天生以中心为原点顺时针扫射，配合 animation: rotate 3s linear infinite 就能做出环形流光效果。
- 伪元素
::before设为绝对定位、全尺寸覆盖，background: conic-gradient(from var(--rotate), #ff6b6b, #4ecdc4, #44b5b1) - 必须声明
@property --rotate { syntax: "<angle>"; inherits: false; initial-value: 0deg; }</angle>，否则 CSS 动画无法驱动自定义属性 - 动画写法：
@keyframes rotate { to { --rotate: 360deg; } }，然后在元素上加animation: rotate 3s linear infinite - 注意：Safari 15.4+ 才完全支持
@property，旧版 Safari 需降级为 JS 控制或改用transform: rotate()+clip-path遮罩 - 性能敏感场景建议加
will-change: background（但慎用，可能触发过多图层）
容易被忽略的三个细节
第一，background-image 多层叠加时，顺序很重要：后写的渐变会盖在先写的上面，所以边框层要按“上→右→下→左”或反序排，避免某一边被遮住；第二，background-size 和 background-position 必须单位一致（都用 px 或都用 %），混用会导致 Safari 表现异常；第三，hover 触发的动画若没设 transition: background-position .3s，在快速进出时会卡顿或跳变 —— 这不是 bug，是浏览器没来得及插值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
