css3怎样设置环形圆

1. 简介

CSS3可以制作各种各样的形状，其中之一就是环形圆。本文将介绍CSS3如何设置环形圆的方法。

2. 使用border-radius属性制作圆形

在制作环形圆之前，我们需要先制作一个普通的圆形。使用CSS3的border-radius属性可以轻松地制作一个圆形。该属性可以设置四个角的半径值，让一个矩形变成圆形。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

我们先设置一个具备宽高的矩形，然后将border-radius的值设置为50%。这样就能将一个矩形转化为一个圆形。

3. 使用伪元素绘制环形圆

环形圆的制作需要用到CSS3的伪元素。伪元素是指通过CSS选择器向文档中添加额外的元素。我们可以使用:before和:after伪元素来制作环形圆。

3.1 使用:before伪元素制作环形圆

环形圆可以理解成两个圆环叠加在一起。我们可以先绘制一个白色的圆环，再在内部绘制一个红色的圆环。要绘制圆环，可以在伪元素中使用border属性。使用border-width属性设置边框宽度，和border-color属性设置颜色。

 

.ring {
  width: 100px;
  height: 100px;
  position: relative;
}
.ring:before {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 3px solid white;
}
.ring:after {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 3px solid red;
  border-top-color: transparent;
  transform: rotate(45deg);
  animation: animate 1s linear infinite;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在.ring:before样式中，我们绘制了一个白色的圆环，它的宽度是整个圆的宽度减去6px（边框宽度的总和），高度也是一样。使用border-radius设置该圆环的边框半径为50%，就能绘制出一个完整的圆形。接着，在.ring:after样式中，我们设置了一个红色的圆环。同样使用border属性绘制，但这里需要注意的是，需要将上边框设置为透明，让内部的白色圆环能够显示出来。接着，使用transform: rotate()属性将它旋转45度，使其符合环形圆的形状。然后，使用animation属性让其旋转起来。

3.2 使用:after伪元素制作环形圆

使用:after伪元素也可以制作环形圆。在这种方法中，我们只是少绘制了一个圆环。首先，设置一个圆形，然后使用:after伪元素绘制一个弧线，使用border-radius属性设置作为圆形的角度。

.half-ring {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  background-color: white;
}
.half-ring:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 100px;
  border-radius: 0 100px 100px 0;
  border: 3px solid red;
  border-right-color: transparent;
  transform-origin: 0 50%;
  transform: rotate(120deg);
  animation: animate 1s linear infinite;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在.half-ring:before中，我们先设置一个白色的圆形。接着在.half-ring:after中，我们设置了一个宽度为50px，高度为100px的矩形，使用border-radius设置了它的右边角度，让它成为了一个弧形。使用border属性设置颜色，从而绘制出了环形圆。同样地，使用transform-origin和transform属性让它旋转，用animation属性让它不断转动。

4. 总结

CSS3提供了很多的绘制形状的方法，我们可以使用border-radius属性和伪元素来绘制环形圆。这些方法也可以应用于其他形状的绘制中。熟练掌握这些方法，可以帮助我们在前端开发中提高工作效率，制作出更加优美的UI界面。