border静态圆形进度条怎么做

要创建一个静态圆形进度条，可以使用CSS中的border属性和border-radius属性。下面是一个示例代码，可以根据需要进行调整：

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

.progress-bar {
  width: 100px;
  height: 100px;
  border: 10px solid #ccc;
  border-radius: 50%;
  position: relative;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid #f00;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
}

解释一下代码：

首先，我们创建了一个div元素，它的class为progress-bar，用来表示整个进度条的容器。然后，我们再在其中创建一个div元素，它的class为progress，用来表示进度条的进度部分。

在CSS中，我们给progress-bar设置了一个边框宽度为10px的圆形边框，并且设置了容器的宽度和高度为100px，它的position属性设置为relative。这是为了使我们在后面给progress设置绝对定位时，它是相对于progress-bar进行定位的。

然后，我们给progress设置了一个边框宽度为10px的圆形边框，它的position属性设置为absolute，这样它就可以相对于progress-bar进行定位。我们还设置了它的clip属性，这是为了控制进度条的显示区域。clip属性的值是一个矩形区域，其中前两个参数指定了左上角的坐标，后两个参数指定了右下角的坐标。这样，我们就可以通过修改clip属性的值来控制进度条的显示区域，从而实现动态的进度条效果。

在这个示例中，我们将clip属性的值设置为rect(0, 50px, 100px, 0)，这样就只显示了左半边的进度条。如果要显示右半边的进度条，可以将clip属性的值修改为rect(0, 100px, 100px, 50px)。如果要显示整个进度条，可以将clip属性的值修改为rect(0, 100px, 100px, 0)。