conic-gradient画饼图角度偏差因0°默认在正上方而非右侧，需用from 90deg校正；扇区边界需精确衔接防浮点误差；环形进度条依赖容器形状与padding留白，非渐变本身镂空。
conic-gradient 画饼图时角度算不准，转一圈少几度？
浏览器默认把 conic-gradient 的 0° 放在正上方（12 点方向），而多数人直觉是 0° 在右侧（3 点方向）。这会导致扇形起始位置偏移，尤其拼接多个扇区时缝隙或重叠明显。
- 用
from 90deg把起点强行拉回右侧：比如conic-gradient(from 90deg, red 0% 30%, blue 30% 65%) - 每个扇区终点值必须等于下一个扇区起点值，避免浮点误差累积（如不用
33.33%，改用精确分数或整数百分比） - Chrome 和 Safari 对
conic-gradient的角度解析一致，但旧版 Firefox 不支持，需加@supports (background: conic-gradient(red, blue))做检测
用 conic-gradient 实现环形进度条，怎么让空白部分“透明”？
conic-gradient 本身不能直接产生中间镂空效果，它只是背景渐变。所谓“环形”，其实是靠元素自身形状（比如 border-radius: 50% + padding 或伪元素遮罩）配合渐变实现的，不是渐变画出来的“圆环”。
- 最简方案：一个正方形容器设
border-radius: 50%，用background写conic-gradient，再用background-clip: padding-box配合padding留白 - 别试图用
transparent占位来“挖空”，conic-gradient中的透明色仍会参与角度计算，视觉上会漏底色 - 动画时建议用
background-position+rotate组合，而非动态改渐变色止点——后者触发重绘开销大，且 Safari 下有闪烁
Vue/React 里动态生成 conic-gradient，CSS 变量传不进去？
CSS 自定义属性（--percent）不能直接在 conic-gradient 的百分比位置使用，因为 CSS 函数内部不解析变量值，calc() 也进不去角度或色标位置。
- 只能通过 JS 拼字符串写内联样式：
element.style.background = `conic-gradient(red 0% ${percent}%, #eee ${percent}% 100%)` - 若用 CSS-in-JS 库（如 styled-components），确保插值语法正确，避免引号嵌套错误导致整个渐变失效
- 服务端渲染场景下，首次 HTML 输出无法含动态渐变，得等 JS 加载后补全，否则首屏看到的是 fallback 背景
conic-gradient 在深色模式下颜色对比度崩了？
渐变色停点写死 #ff6b6b 这类具体值，不会随系统主题切换；但更隐蔽的问题是：深色模式下，conic-gradient 的背景层和容器背景色反差变小，原本清晰的扇区边界变得模糊。
立即学习“前端免费学习笔记（深入）”；
- 优先用
color-scheme: light dark+prefers-color-scheme媒体查询分别定义两套渐变色值 - 避免依赖“白色背景衬托渐变”，改用带描边或阴影的容器强化轮廓（例如
box-shadow: 0 0 0 4px #fff） - 移动端 Safari 对
conic-gradient的 subpixel 渲染较弱，深色背景下轻微锯齿会被放大，此时加transform: translateZ(0)可触发 GPU 加速缓解
conic-gradient，而是想清楚：这个渐变到底是在“画图”，还是在“模拟图”——前者要像素级控制，后者得接受浏览器渲染的弹性边界。 
