conic-gradient比linear-gradient更适合流光边框，因其按角度0deg→360deg天然环形渐变，配合rotate动画即可实现干净流光；而linear-gradient需复杂位移裁剪，易露白边且性能差。
conic-gradient 为什么比 linear-gradient 更适合流光边框
因为流光需要环形扫过边框，conic-gradient 天然按角度（0deg→360deg）渐变，而 linear-gradient 只能沿直线方向推移，强行模拟圆周运动得靠复杂位移+裁剪，性能差还容易露白边。用 conic-gradient 直接定义色相环上的一小段高亮（比如 0deg–30deg 是亮色，其余透明），再配合 animation: rotate 就能干净扫出流光效果。
关键点：
-
conic-gradient的起始角默认是 0deg（正上方），不是 CSS 动画里常见的 0deg（正右方），注意对齐预期方向 - 必须设
background-clip: padding-box或border-box，否则渐变会填满整个元素背景，盖掉内容 - 边框本身不能用
border，得用background模拟，否则conic-gradient无法精确贴合边框路径
怎么用 background + padding 实现“伪边框”并绑定流光
真正的 border 不支持 conic-gradient 作为边框颜色，所以得把边框“画”在背景上：用 padding 留出边框空间，再用 background 在这个区域绘制渐变，并通过 background-clip 把它限制在 padding 区域内。
实操写法示例：
立即学习“前端免费学习笔记（深入）”；
.shiny-border {
padding: 2px; /* 边框粗细 */
background: conic-gradient(
from 0deg,
#ff0080, #ff0080 30deg,
transparent 30deg, transparent 360deg
);
background-clip: padding-box;
animation: shine 3s linear infinite;
}
<p>@keyframes shine {
to { transform: rotate(360deg); }
}注意：
-
padding值就是你想要的“边框宽度”，别再写border: 2px solid -
from 0deg控制流光起始位置；改from 90deg就从右边开始扫 - 动画必须加在元素自身（不是
background-position），因为conic-gradient旋转靠的是transform改变整个元素坐标系
为什么 transform: rotate 会导致内容跟着转？怎么只转边框不转文字
因为 transform 作用于整个元素盒，文字自然也一起转了。解决方法是用子容器反向抵消：
- 外层容器负责流光动画和
conic-gradient背景 - 内层容器用
transform: rotate(-360deg)抵消旋转（配合动画同步） - 或者更稳妥：用
backface-visibility: hidden配合will-change: transform减少重绘抖动
简化方案（推荐）：直接把动画加在伪边框元素上，内容放子元素并单独重置 transform：
<div class="shiny-wrapper">
<div class="shiny-content">按钮</div>
</div>
<p>.shiny-wrapper {
padding: 2px;
background: conic-gradient(from 0deg, #00c9ff, #00c9ff 25deg, transparent 0);
background-clip: padding-box;
animation: shine 2.5s linear infinite;
}
.shiny-content {
transform: rotate(-360deg); /<em> 抵消父级旋转 </em>/
transform-origin: center;
}移动端 Safari 和旧版 Chrome 的兼容性坑
conic-gradient 在 Safari 14.1+、Chrome 85+ 才稳定支持，iOS 14.5 之前基本不可用。遇到不生效，先检查：
- 是否漏写了
-webkit-conic-gradient前缀（Safari 早期需此） - 是否用了
from关键字但浏览器不支持（部分旧版只认角度值，不用from） - 是否在
background中混用了其他渐变（多背景叠加时，旧引擎解析失败直接丢弃整条声明）
兜底建议：
- 用
@supports (background: conic-gradient())做特性检测，降级为linear-gradient横向扫光 - 避免在
button或input上直接用 —— 这些元素内部渲染机制特殊，background-clip行为不一致
真正难调的不是动画逻辑，而是让 conic-gradient 在各种 padding、border-radius、box-sizing 组合下依然紧贴边框不溢出——多试几次 background-origin 和 background-clip 的组合，比调动画时长花的时间还多。
