conic-gradient需浏览器支持（Chrome 69+、Firefox 63+、Safari 15.4+），语法为background: conic-gradient(from <angle>, <color-stop>, ...);，起始角默认0deg（正上方），顺时针渐变，须设固定宽高、background-size: contain和background-repeat: no-repeat以正确显示。
conic-gradient 语法和基本写法
浏览器支持 conic-gradient 的前提是启用现代 CSS 支持（Chrome 69+、Firefox 63+、Safari 15.4+），旧版 Safari 需加 -webkit-conic-gradient 前缀，但注意：WebKit 早期实现与标准不兼容，仅建议在 Safari 15.4+ 使用无前缀版本。
基础格式是：background: conic-gradient(from <angle>, <color-stop>, <color-stop>);。其中 from 指定起始角度（默认为 0deg，即正上方），渐变按顺时针方向展开，0° → 360° 绕中心一圈。
-
from 0deg：红色从正上方开始（不是左方）——这点和linear-gradient完全不同，容易误判方向 - 颜色停止点可写为
#f00 25%, #0f0 50%, #00f 75%，百分比表示绕圆周的角度位置，不是线性距离 - 不写
from时默认从 0deg（12 点钟方向），不是 90deg（3 点钟方向）
让锥形渐变真正“居中显示”的关键设置
直接写 conic-gradient(red, blue) 很可能只看到一小块色块，甚至完全不可见——因为默认渐变尺寸由容器内容撑开，且重复模式为 repeat（非 no-repeat）。
必须显式控制尺寸和定位：
立即学习“前端免费学习笔记（深入）”；
- 给容器设固定宽高（如
width: 200px; height: 200px;），否则渐变区域可能坍缩 - 用
background-size: 200px 200px或background-size: contain确保渐变填满区域 - 加
background-repeat: no-repeat，否则会平铺出多个同心圆环 - 推荐组合：
background: conic-gradient(red, yellow, green, cyan, blue, magenta); background-size: contain; background-repeat: no-repeat;
常见错误：Safari 中渐变消失或错位
Safari 15.4 之前使用 -webkit-conic-gradient 时，角度行为与标准相反：0deg 表示正右方（而非正上方），且不支持 from 关键字。升级后若仍失效，大概率是缓存了旧 CSS 或未清除前缀。
- 检查 DevTools 的 computed 样式，确认
background-image是否解析为conic-gradient，而不是被忽略 - 移除所有
-webkit-前缀，只保留标准写法；Safari 15.4+ 已完全支持无前缀版本 - 避免在
@supports中错误检测：@supports (background: conic-gradient(red, red))是可靠写法；@supports (-webkit-conic-gradient: ...)无效（语法错误） - 如果容器是 inline 元素（如
<span>），需先设display: inline-block或block，否则宽高约束不生效
实用技巧：用 conic-gradient 实现加载动画或色盘 UI
锥形渐变最自然的用途是旋转动画（比如 loading indicator）或交互式色环选择器。但注意：纯 CSS 动画无法直接“旋转”渐变本身，得靠 transform: rotate() 作用于容器。
- 实现 360° 加载动画：
animation: spin 1s linear infinite;+@keyframes spin { to { transform: rotate(360deg); } } - 色盘点击取色需配合 JS：监听
click事件，用clientX/clientY和元素getBoundingClientRect()计算相对于中心的角度，再换算为 0–360 范围 - 避免在大尺寸容器（如全屏背景）上直接用
conic-gradient，性能较差；更适合固定尺寸组件（按钮、卡片、控件） - 若需透明底色，不要用
transparent作色标（会导致灰阶过渡），改用rgba(255,0,0,0.8)等带 alpha 的值
background-repeat: no-repeat，结果看到一整页马赛克色块。调的时候先盯死这两项。 
