conic-gradient不能直接用于border，因css规范不支持border-color接收渐变函数，必须用background+padding模拟边框，并配合background-clip: padding-box限制渲染区域。
能，但必须用 background 模拟边框，不能直接作用于 border 属性；否则渐变会填满整个背景或根本不可见。
为什么 conic-gradient 不能直接写在 border 上
浏览器不支持 border-color 接收 conic-gradient() 值。你写 border: 2px solid conic-gradient(...) 会被完全忽略，退回到默认色（通常是黑色）。所有“流光边框”效果，本质都是用 background + padding 或伪元素“画”出来的视觉替代方案。
- 真
border是纯色、无渐变能力的渲染层，CSS 规范未开放该通道 -
background支持任意渐变函数，但需配合background-clip: padding-box把它限制在 padding 区域内，才能“看起来像边框” - 圆角元素上若直接套用
conic-gradient+border-radius，渐变会在拐角处拉伸变形——这不是 bug，是坐标系映射导致的天然失真
最稳的伪边框实现：padding + background-clip
这是兼容性最好、代码最轻、调试最直观的方案，适用于卡片、按钮等常规矩形/圆角容器。
- 给元素加
padding: 3px（数值即你想要的“边框粗细”） - 设置
background: conic-gradient(from var(--angle), #ff0080, #ff0080 15deg, transparent 15deg, transparent 360deg)—— 高亮段控制在 15° 内，模拟“一道光扫过”而非整圈彩虹 - 必须加
background-clip: padding-box，否则渐变会覆盖内容区域 - 动画不能动
background-position（conic-gradient不响应它），而要靠@keyframes更新--angle变量
示例关键代码：
button {
padding: 3px;
--angle: 0deg;
background: conic-gradient(from var(--angle), #ff0080, #ff0080 15deg, transparent 15deg, transparent 360deg);
background-clip: padding-box;
animation: spin 4s linear infinite;
}
@keyframes spin {
to { --angle: 360deg; }
}
@property 是平滑动画的必要条件
没有 @property 声明，Chrome/Firefox 会把 --angle 当作普通字符串变量，动画过程中渐变只在起止帧重绘，中间过渡卡顿甚至跳变。
- 必须在全局或组件作用域显式注册：
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }</angle> -
syntax: "<angle>"</angle>是关键——只有声明了类型，浏览器才启用硬件加速插值 - Safari 15.4+ 才支持
@property，旧版 Safari 需 fallback 到mask+transform: rotate()方案 - 别漏单位：写
0deg，不是0；写360deg，不是1turn（虽等价，但部分引擎对 turn 解析不稳定）
圆角/矮按钮上容易断光的修复点
当元素高度 ≤ 40px 或 border-radius ≥ 50%，原始的 conic-gradient 动画常出现光带闪烁、局部消失——根源是渐变图层像素密度不足，旋转时采样丢失。
- 解决办法不是调快动画，而是增大背景图层物理尺寸：用
::before伪元素，设width: 200%; height: 200%; left: -50%; top: -50%，再加transform: scale(2.5)提升细节余量 - 动画必须合并
transform: rotate() scale()，避免分拆导致重排 - 动画时长建议 ≥ 6s，降低单位时间角度变化率，尤其对小尺寸元素更友好
- 别依赖
border-radius裁剪渐变——它只影响盒模型，不影响渐变坐标系；要用mask或clip-path精确镂空
真正难的从来不是让光转起来，而是让光在任意尺寸、任意圆角、任意缩放比例下，都稳稳贴着边缘走一圈，不撕裂、不断续、不糊边。这需要同时理解渐变坐标系、盒模型裁剪逻辑和浏览器合成层调度机制——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
