conic-gradient() 画不出圆锥效果主因是浏览器兼容性不足，老版本（如chrome 89前、safari 15.4前）直接忽略该函数而回退为纯色；需用开发者工具验证是否解析成功，并注意from角度偏移、正方形容器约束及svg/canvas替代方案。
conic-gradient() 为什么画不出圆锥效果
浏览器不支持 conic-gradient() 的老版本（比如 Chrome 89 之前、Safari 15.4 之前）会直接忽略该函数，回退成纯色或默认背景——不是你写错了，是它根本没生效。可以用 background: conic-gradient(red, blue); 加个简单测试，再打开开发者工具的“Computed”面板看 background-image 是否解析成了 conic-gradient，而不是空值或 linear-gradient。
常见错误现象：Unexpected token 报错基本不存在（语法校验宽松），但页面啥都没变，大概率是兼容性兜底了。
- 使用场景：仪表盘刻度、色盘选择器、饼图占位、加载动画旋转色环
- 注意 Safari 15.4+ 才开始支持无前缀版本；旧版需用
-webkit-conic-gradient()，且不能和标准写法混用（否则全失效） - 不支持 CSS 变量直接插在角度位置，比如
conic-gradient(from var(--deg), red, blue)会失败；得用 JS 动态生成或预编译
角度起始点和旋转方向怎么控制
conic-gradient() 默认从正上方（12 点钟方向）开始，逆时针铺开颜色——这和数学极坐标（0° 在右侧，逆时针增）相反，也和 CSS transform: rotate() 的顺时针习惯冲突，容易配错刻度。
想对齐物理表盘或 UI 常见布局，得手动偏移：
- 加
from 90deg让起点移到 3 点钟方向（即数学 0°），再逆时针展开 → 视觉上像顺时针填色 - 用
from -90deg或from 270deg移到 12 点方向（默认），但这是逆时针起点，填色顺序反直觉 - 别依赖
rotate()包裹容器来“修正”，因为渐变本身是静态绘制的，旋转容器只会转图案，不改色序逻辑
示例：做一个从 3 点钟开始、顺时针覆盖 270° 的蓝→红过渡：background: conic-gradient(from 90deg, blue 0%, blue 75%, red 75%, red 100%);
如何让 conic-gradient 响应式缩放不拉伸变形
圆锥渐变本质是基于元素**宽高比**渲染的：当容器不是正方形时，conic-gradient() 会在内部按最小边长做圆形裁切，多余区域留白或重复——看起来像被压扁、缺角、甚至只显示四分之一。
- 必须确保容器
width和height相等；用aspect-ratio: 1最稳妥（Chrome 88+/Firefox 89+） - 避免用
%、vw单独设宽高却没约束比例；父容器流式布局时，推荐用padding-bottom: 100%+position: relative/absolute模拟正方形 - 不要给
background-size设非contain或cover值，它对 conic-gradient 无效，还可能触发意外重绘
和 SVG <radialgradient></radialgradient> 或 Canvas 对比，什么时候该换方案
纯 CSS conic-gradient() 不支持径向偏移、透明度逐段插值、或动态扇区数量变更——一旦需要每块角度独立绑定数据、或实时更新某一段颜色，CSS 就卡死了。
这时候该切：
- SVG：用
<defs></defs>+<conicgradient></conicgradient>（注意是 SVG 元素，不是 CSS 函数），支持 DOM 操作每个<stop></stop>，适合可交互色盘 - Canvas：JS 控制
ctx.createConicGradient()（Chrome 117+）、或手算极坐标像素点；适合动画帧率敏感场景（如实时音频频谱） - 别硬撑：如果要兼容 IE 或 Android 4.4，
conic-gradient()本身就不行，得降级为多层linear-gradient旋转叠加，代码量翻三倍且边缘有接缝
最常被忽略的一点：圆锥渐变没有“中心点坐标”参数，它的圆心永远是盒模型的中心。想偏移？只能靠 background-position 移动整个渐变层——但这不是真偏移圆心，只是平移贴图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
