[分享]css写的进度圆有毛边

如果你曾经使用过 CSS 写进度圆，或者正在准备使用 CSS 写进度圆的话，你可能会发现这个进度圆在网页上展示时会出现一些"毛边"，这显然不是我们想要的。这些"毛边&qu...

如果你曾经使用过 CSS 写进度圆，或者正在准备使用 CSS 写进度圆的话，你可能会发现这个进度圆在网页上展示时会出现一些"毛边"，这显然不是我们想要的。

这些"毛边"的出现是由于浏览器的渲染机制所导致的。下面，我们就来看一下具体是怎么回事，以及如何解决这个问题。

 .progress{
    position: relative;
    width: 200px;
    height: 200px;
  }

  .progress .progress-value{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    border: 20px solid #eee;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animate 2s linear infinite;
  }

  @keyframes animate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .progress .progress-value::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 20px solid #0ff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
  } 

如上面的代码所示，我们首先定义了一个尺寸为 200*200 的进度圆容器 .progress，然后在其中定义一个用于展示进度的元素 .progress-value。进度圆的具体效果可以通过动画来实现，这里我们使用了一个旋转动画 @keyframes animate，让进度圆不断地旋转。

但是，大家发现没有，这个进度圆的 border 可以设置得很厚，但是展示时，边缘还是有"毛边"，这就很尴尬。解决这个问题其实很简单，我们只需要在进度圆的伪元素 ::before 中添加 transform: rotate(45deg);，不仅可以解决 CSS 写出的进度圆的毛边问题，还能新增一个装饰效果。这是因为在 CSS 中设置了 transform 属性之后，会使浏览器将 ::before 伪元素像图片一样渲染，从而大大提高了渲染精度，避免了出现毛边的问题。

 .progress .progress-value::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 20px solid #0ff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    transform: rotate(45deg);
  } 

通过这样的方式，我们可以轻松地解决 CSS 写的进度圆出现毛边的问题，并使得进度圆更加美观。