纯CSS实现环形图（ring chart）在Chrome下像素破碎、渲染不光滑求助

云原生阿岚

2026-10-11

环形图Chrome下像素破碎解决方案

你遇到的渲染锯齿问题确实和CSS渐变的硬边缘处理有关，Chrome对渐变中完全无过渡的颜色截断抗锯齿支持较差，加上你使用的环形尺寸偏小，进一步放大了像素破碎的问题。

具体优化方案

优化渐变硬截断：给渐变的颜色分界处增加0.5%~1%的过渡区间，避免完全的硬突变，触发Chrome的抗锯齿渲染
开启GPU加速渲染：给元素添加相关属性触发GPU渲染，提升边缘平滑度
可选优化：通过「放大绘制后缩小」的方式，进一步提升边缘精度

修改后完整代码

HTML代码

<div class="chart-wrapper">
  <figure class="pie-chart" data-percentage="70%" style="--percentage:70%; --color:gray">
  </figure>
</div>

CSS代码（带缩放优化版本，效果最优）

.pie-chart {
  background:
    radial-gradient(
      circle closest-side,
      transparent 99%,
      white 100%
    ),
    conic-gradient(
      var(--color) calc(var(--percentage) - 0.5%),
      var(--color) var(--percentage),
      green 0
  );
  position: relative;
  /* 先放大2倍绘制再缩小，提升渲染精度 */
  width: 80px;
  min-height: 80px;
  margin: 50px auto;
  transform: scale(0.5) translateZ(0);
  will-change: transform;
  shape-rendering: geometricPrecision;
}
.pie-chart:after {
  content:attr(data-percentage); 
  /* 对应放大后的尺寸调整字号 */
  font-size: 1.5rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  line-height:normal;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);   
}