conic-gradient 适合做加载圆环，因其可直接按角度切分颜色，无需拼接 radial-gradient 或依赖 transform: rotate() 动画，CSS 更简洁、动画更平滑；但不支持 IE，旧版 Safari 也有兼容问题。
为什么 conic-gradient 适合做加载圆环
它能直接按角度切分颜色，不用拼接多个 radial-gradient 或靠 transform: rotate() 驱动伪元素，动画更平滑、CSS 更简洁。但注意：它不支持 IE，且 Safari 旧版本（conic-gradient 动画有渲染卡顿，需加 will-change: background 缓解。
用 conic-gradient 绘制静态圆环
核心是两层渐变叠加：外圈用 conic-gradient 做“进度色带”，内圈用纯色遮罩出“空心”效果。关键点在于控制色标位置和透明度：
-
conic-gradient(#3b82f6 0%, #3b82f6 25%, transparent 25%, transparent 100%)—— 这样只画出 1/4 圆弧；想画完整环，把第一个色标设为0%，第二个设为100%，再让透明段“吞掉”中间 - 实际常用写法：
conic-gradient(#3b82f6 0%, #3b82f6 75%, transparent 75%, transparent 100%)，这样 75% 是实色，25% 是透明缺口，视觉上就是带缺口的环 - 必须配合
border-radius: 50%和固定宽高，否则不是正圆
让圆环真正转起来：animation + background-position
conic-gradient 本身不能直接用 rotate 动画，但可以靠 background-position 配合 background-size 模拟旋转——前提是把它当背景图用，且设为 background-clip: content-box 或结合 padding 控制显示区域：
- 给元素设
width: 40px; height: 40px;，border-radius: 50%，再加padding: 4px，让内容区缩成小圆，背景在 padding 区绘制 - 背景用
background: conic-gradient(#3b82f6 0%, #3b82f6 75%, transparent 75%, transparent 100%) - 关键动画：
animation: spin 1s linear infinite;，其中@keyframes spin { from { background-position: 0 0; } to { background-position: 360px 0; } } - 必须配
background-size: 200% 200%，否则background-position移动无效
兼容 fallback 和性能提醒
如果目标环境要兼容 Safari 15.x 或安卓 WebView 旧版，conic-gradient 动画可能跳帧或不动。这时别硬扛，直接降级：
- 用
@supports not (background: conic-gradient())包裹新方案，里面写传统border+transform: rotate()方案 - 避免在列表项里大量使用该动画，每个都会触发重绘；加
will-change: background-position只对正在动画的元素生效，别全局加 - 真要极致性能，改用 SVG
stroke-dasharray+stroke-dashoffset，CPU 占用更低
最易被忽略的是 background-size 和 background-position 的单位匹配——background-position: 360px 能转一圈，前提是 background-size 设得够大，不然位移根本没效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
