CSS使用conic-gradient出现无规律水平线条渲染故障咨询

这个现象是浏览器栅格化过程中的亚像素抗锯齿误差导致的，和conic-gradient语法本身无关，触发问题的两个核心诱因：

• 元素宽高设置为101.5px这类非整数值，无法和设备物理像素、设备像素比（DPR）完全对齐，半像素位置的抗锯齿计算本身就存在概率性偏差
• 渐变相邻色标之间预留了0.3%的空隙：比如第一个黑色色段结束在7%，下一个灰色色段从7.3%才开始，中间的空隙浏览器会自动做颜色插值，当元素尺寸变化触发重绘、像素对齐位置偏移时，这个插值区间就会渲染出异常的细线条；调整窗口尺寸时浏览器会重新计算栅格位置，对齐关系改变，线条就可能消失。

完全不需要放弃使用conic-gradient，该属性目前已在所有主流浏览器获得稳定支持，只要调整写法即可100%规避该问题：

• 优先使用整数值设置元素宽高，减少半像素对齐偏差
• 硬边渐变的相邻色标端点完全重合（可做0.1%的微小重叠进一步抵消抗锯齿误差），不要留插值空隙

修正后的代码如下：

div {
    width: 102px;
    height: 102px;
    background: conic-gradient(
       #000 0% 7%, 
       #cfcfcf 7% 40.3%,
       #666 40.3% 73.7%,
       #000 73.7% 100%
    );
    /* 极端场景下如果仍有细线条，可加1px圆角或GPU加速属性提升渲染精度 */
    /* border-radius: 1px; */
    /* transform: translateZ(0); */
}

对应的HTML代码无需改动：

<div></div>

conic-gradient是目前实现饼图、环形进度、色轮等锥形视觉效果最轻量的原生CSS方案，没有第三方脚本或图片替代方案的性能优势，这类细线条瑕疵都属于写法可规避的渲染问题，不存在稳定性缺陷。

内容的提问来源于stack exchange，提问作者Quincy Nash