conic-gradient 画色轮时颜色断层明显
浏览器默认把 conic-gradient 当作离散角度分段渲染，尤其在低分辨率设备或缩放状态下，相邻色块交界处容易出现锯齿或跳变。这不是写法错，是渐变采样精度不足导致的视觉断层。
- 用
from 0deg显式声明起始角，避免不同浏览器默认起点不一致（Chrome 从 0°、Safari 有时从 90°） - 至少写满一圈完整色相：从
hsl(0,100%,50%)到hsl(360,100%,50%)，中间插值点建议每 15° 一个，别偷懒只写 0/120/240/360 - 加
background-size: 100% 100%防止父容器拉伸导致角度压缩变形
Firefox 不支持 conic-gradient 的 fallback 方案
Firefox 直到 83+ 才原生支持 conic-gradient，旧版本会直接忽略整条声明。不能靠 @supports 简单包裹就完事——它对语法错误容忍度低，写错一个参数整个规则就失效。
- 用两层 background 声明：先写
linear-gradient或纯色兜底，再覆盖一层conic-gradient（CSS 层叠天然 fallback） -
@supports (background: conic-gradient(red, blue))是安全检测写法；别写成@supports (conic-gradient)，这在旧 Firefox 会误判为支持 - 真要兼容 IE 或老 Firefox？得切 SVG 色轮图，CSS 方案无法降级到矢量精度
用 conic-gradient 做交互色盘时鼠标定位不准
色轮点击取色依赖 getBoundingClientRect() + 角度反算，但 conic-gradient 渲染区域和元素几何边界不总重合——尤其是加了 border-radius: 50% 或 transform 缩放后，坐标系偏移会让角度计算偏差 5°~15°。
- 确保色轮容器是正方形且无 border/padding 干扰，用
box-sizing: border-box - 计算角度时用
Math.atan2(y - centerY, x - centerX)，别用Math.acos或简单除法，前者能正确处理四象限 - 监听
pointerdown而非click，避免移动端 touch delay 导致坐标漂移
conic-gradient 性能卡顿或内存暴涨
不是所有“圆锥渐变”都该用 conic-gradient。当色轮尺寸超 500px × 500px，或页面同时存在多个动态更新的色轮时，某些低端 GPU 会把每个像素角度重算一遍，帧率骤降。
立即学习“前端免费学习笔记（深入）”；
- 静态色轮优先用
conic-gradient(hsl(0,100%,50%), hsl(60,100%,50%), ...)写死，别用 JS 拼字符串再 setStyle - 动态色轮（如拖拽旋转）改用
transform: rotate()+ 单层线性渐变遮罩，比实时重绘conic-gradient省 70% GPU 时间 - Chrome DevTools 的 Rendering 面板打开 “Paint flashing”，能直观看到哪些色轮区域被反复重绘
实际用起来最麻烦的从来不是怎么画出那个圆，而是点击位置换算成 HSL 时漏掉了 canvas 坐标系和 CSS 坐标系的 y 轴方向差异，这点连 MDN 示例都曾写错过。
