HTML 使用纯CSS绘制圆形

在本文中，我们将介绍如何使用纯CSS绘制圆形。CSS是一种用于样式化网页的技术，它可以为HTML元素添加各种样式和效果。使用CSS绘制圆形是一个常见的需求，它可以用于创建图标、徽标、按钮等。

阅读更多：HTML 教程

使用border-radius属性绘制圆形

CSS的border-radius属性可以用来设置元素的边框半径，从而实现圆角效果。它的语法如下：

border-radius: <length>|<percentage>|inherit;

其中，和用于设置半径的大小，可以是具体的像素值或比例值。如果设置为50%，则表示以元素的宽度和高度的一半作为半径，即绘制一个圆形。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

在上面的示例中，我们创建了一个宽高为100像素的div元素，并为其添加了一个红色背景。通过设置border-radius为50%，我们实现了一个圆形的效果。

使用伪元素::before和::after绘制圆形

除了使用border-radius属性，我们还可以利用CSS的伪元素::before和::after来绘制圆形。通过设置宽高相等并且border-radius为50%，我们可以在一个空的元素上绘制一个圆形。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.circle::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.circle::after {
  content: "";
  width: 80px;
  height: 80px;
  background-color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

在上面的示例中，我们创建了一个宽高为100像素的div元素，并为其设置了red背景。通过::before伪元素，我们在div元素上叠加了一个完全相同的红色圆形。通过::after伪元素，我们在div元素上叠加了一个白色同心圆。

使用CSS动画绘制圆形

在CSS中，我们可以使用@keyframes关键字来创建动画效果。通过结合border-radius和@keyframes，我们可以实现绘制圆形的动画效果。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: circle-animation 2s infinite alternate;
}

@keyframes circle-animation {
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

在上面的示例中，我们创建了一个宽高为100像素的div元素，并为其设置了red背景。通过设置animation属性，我们使div元素应用了名为circle-animation的动画，该动画设置了border-radius从0到50%的变化。该动画会在2秒内无限循环播放，并在每次播放结束时反向播放。