conic-gradient在老浏览器中不生效，需手动添加-webkit前缀并确保容器为正方形且border-radius:50%。chrome 89/safari 15.4前忽略该函数，css变量不能用于from角度，autoprefixer不支持自动补前缀。
conic-gradient 在老浏览器里直接不生效，不是你写错了
Chrome 89 之前、Safari 15.4 之前版本会完全忽略 conic-gradient()，回退成纯色或透明背景——页面没报错、也没提示，只是“啥都没变”。用开发者工具打开“Computed”面板，检查 background-image 是否解析为 conic-gradient，而不是空值或被降级为 linear-gradient，就能确认是不是兼容性问题。
常见错误现象：Unexpected token 这类语法报错基本不会出现（CSS 对 conic-gradient 语法校验很宽松），但视觉上毫无变化，八成是浏览器根本没认这个函数。
必须手动加前缀，且不能和标准写法混用
Safari 15.4+ 才支持无前缀的 conic-gradient()；更早版本只认 -webkit-conic-gradient()。但注意：-webkit-conic-gradient() 和标准版不能共存于同一声明中，否则整个渐变会被浏览器丢弃。
- ✅ 正确写法（按顺序）：
background: -webkit-conic-gradient(red, blue); background: conic-gradient(red, blue); - ❌ 错误写法：
background: -webkit-conic-gradient(red, blue), conic-gradient(red, blue);→ 全部失效 - ⚠️ 不要指望 Autoprefixer 自动补
-webkit-：它目前不处理conic-gradient，得手写
想动态控制颜色分布，CSS 变量不能直接插在角度位置
conic-gradient(from var(--deg), red, blue) 这种写法会失败——CSS 变量无法在 from 后直接参与角度计算。角度参数不接受变量注入，只能靠 JS 动态生成字符串或预编译（如 Sass）。
可行方案：
- 用 JS 修改
style属性：el.style.background = `conic-gradient(from ${deg}deg, red, blue)` - 把角度拆进颜色断点里：
conic-gradient(red 0%, red var(--start), blue var(--start), blue 100%)，再用 JS 控制--start - 避免在关键路径上依赖
from+ 变量组合，优先用颜色断点模拟偏移
圆锥渐变必须配合正方形 + 圆角才能看出效果
conic-gradient() 的中心点默认在元素盒模型中心，但若容器宽高不等，渐变会拉伸变形；若没设 border-radius: 50%，它就只是个带旋转色环的矩形，不是“圆锥”视觉。
- 必须保证容器是正方形：
width: 200px; height: 200px; - 必须加
border-radius: 50%，否则边缘露直角，渐变方向也失真 - 别用
transform: rotate()去“修正”起点方向——那是转整个元素，不是重算渐变逻辑；要用from参数本身调整
最容易被忽略的是：哪怕所有代码都对，只要容器不是正方形或没设圆角，conic-gradient 就只是个奇怪的色块，而不是你想要的圆盘或进度环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
