如何修复conic-gradient实现的进度条边缘锯齿问题

锥形渐变conic-gradient出现边缘锯齿的核心原因是色值硬切时，浏览器默认没有对突变边界做抗锯齿处理，可通过以下方案解决：

• 方案1：给色标添加微度过渡区间，避免硬切（优先推荐）
  把原有突变的色标调整为前后保留0.5~1度的过渡区间，既不会影响进度条的视觉锐利度，又能实现抗锯齿效果。修改后的代码如下：

background-image: conic-gradient(
    transparent calc(max(0deg, var(--min-degrees) - 0.5deg)),
    #00ACEE var(--min-degrees),
    #00ACEE calc(var(--progress, 0) - 0.5deg),
    transparent var(--progress, 0)
);

该方案兼容性最优，也不会对进度条的尺寸、色彩表现产生额外影响。

• 方案2：使用微滤镜组合消除锯齿
  给进度条元素添加极轻微的模糊后再拉高对比度，既能消除锯齿，也不会让边缘发虚：

.progress-bar {
    filter: blur(0.3px) contrast(2);
}

• 方案3：触发子像素渲染
  给元素添加微小的缩放变换，触发浏览器的子像素抗锯齿渲染逻辑，也可以搭配添加1px透明边框强化效果：

.progress-bar {
    transform: scale(1.01) scale(0.99);
    border: 1px solid transparent;
    box-sizing: border-box;
}

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