conic-gradient配mask做边框跑马灯必须分离颜色与遮罩：用radial-gradient做静态遮罩抠形，conic-gradient作背景色带，再通过transform或background-position驱动背景层旋转；禁用from角度动画，否则无效或全黑。
直接用 conic-gradient 配 mask 做边框跑马灯，90% 的失败源于试图动画 from 角度——这在 CSS 中根本不会重绘，只会卡死或全黑。真正能动的，是背景层旋转 + 静态遮罩抠形。
为什么 conic-gradient(from var(--rotate)) + mask 动不起来
浏览器把 mask-image 当作一张静态图处理，哪怕你用 @keyframes 改变了 --rotate 变量，CSS 动画引擎也不会重新解析渐变函数内部的值。这不是写法错，是规范限制：mask 不响应渐变参数变化。
常见错误现象：mask: conic-gradient(from var(--rotate), #3b82f6, #ec4899) + animation: rotateVar 2s infinite → 边框完全不动，或 Safari 下直接变黑。
可行路径只有一条：把颜色和形状拆开——conic-gradient 仅作颜色源（不带 from），用 radial-gradient 或 linear-gradient 单独做遮罩，再靠 transform: rotate() 或 background-position 驱动颜色层运动。
最稳的两层结构：radial-gradient 遮罩 + conic-gradient 背景
遮罩层负责“挖出边框轮廓”，背景层负责“提供流动色带”。二者必须独立、可分别控制。
-
-webkit-mask和mask都得写，Safari 旧版只认前者 - 遮罩推荐：
radial-gradient(farthest-side, transparent 85%, black 85%)，85% 控制边框粗细；太小光带断开，太大边缘臃肿 - 背景用：
background: conic-gradient(#3b82f6, #8b5cf6, #ec4899)，不要加from—— 后续靠transform或background-position转 - 元素必须设
border-radius: 8px（圆角矩形）或50%（圆形），否则遮罩对不齐边框弧度
让光带“跑起来”的两种实操方式
别碰 mask 的角度，只动背景层。方案选哪个，取决于兼容性要求：
-
方案一（简洁但略脆弱）：用
background-size: 200% 200%+background-position: 50% 50%+@keyframes改background-position。Chrome 稳，iOS Safari 易跳帧 -
方案二（更稳）：给整个元素加
transform: rotate(360deg)动画，同时background-attachment: fixed。视觉上是边框在转，实际是容器旋，Safari/Chrome/Firefox 全兼容
无论哪种，都必须配 box-sizing: border-box，否则 padding 和 mask 的基准错位，光带偏移或裁切。
容易被忽略的三个硬性条件
漏掉任意一个，动画就失效或错位：
- 必须显式声明
box-sizing: border-box，否则padding和遮罩尺寸基准混乱 -
-webkit-mask-size: 100% 100%必须写，Safari 下不设会默认按内容尺寸缩放，导致遮罩漂移 - 若元素有
padding或margin，需加mask-origin: border-box或mask-clip: border-box，否则遮罩作用范围超出预期
调的时候，先关掉动画，只验证遮罩能否干净抠出环形/矩形边框；确认无误后再加 @keyframes。别一上来就堆旋转，否则问题叠加，定位困难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
