css3实现圆环百分20进度的效果

可以使用CSS3中的圆角属性配合渐变实现圆环百分比进度的效果，具体代码如下：

<div class="progress">
  <div class="progress-bar"></div>
</div>

.progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: linear-gradient(to right, #ff6b6b 50%, transparent 50%);
  transform: rotate(-90deg);
  transform-origin: center;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: #fff;
}

其中，progress类设置了圆环的宽高和圆角属性，progress-bar类设置了圆环进度条的样式，包括渐变背景和旋转角度。最后，使用伪类::before来遮挡进度条的中心部分，使圆环看起来更加完整。通过调整渐变颜色的百分比，可以实现不同的进度效果。例如，要实现20%的进度效果，可以将渐变颜色的百分比设置为50%。