[分享]css两个圆圈怎么画

CSS是一种常用的样式表语言，可以用来控制网页的外观。今天我要和大家分享如何用CSS画两个圆圈。首先，我们来看一下需要用到的代码：.circle { width: 100px; height: 100...

CSS是一种常用的样式表语言，可以用来控制网页的外观。今天我要和大家分享如何用CSS画两个圆圈。首先，我们来看一下需要用到的代码：

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

.container {
  text-align: center;
} 

以上代码定义了一个名为.circle的CSS类，用于画一个圆形。我们使用width和height属性定义圆的大小为100像素，使用border-radius属性定义边框为50%的圆角。接着，我们使用background-color属性设置背景颜色为红色，使用display属性将其以行内块的形式显示。

为了在页面中显示这个圆形，我们还需要一个名为.container的CSS类，用于容纳圆形。我们使用text-align属性将.container内的所有元素居中对齐。

现在，我们来看一下如何画第二个圆形。我们只需复制.circle类的代码，并将其更改为不同的值即可：

.circle2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: blue;
  display: inline-block;
} 

这个类定义了一个大小为50像素、背景颜色为蓝色的圆。注意，我们使用了不同的类名（.circle2）来区分这两个圆形。

最后，我们只需在HTML中使用这些类名即可在页面中显示这两个圆形：

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

以上代码定义了两个div（块级元素），并分别使用.circle和.circle2类将它们转换为圆形。所有这些元素都包含在一个容器div中，且设置了class为.container，以实现居中对齐的效果。

现在，我们已经成功地用CSS画出了两个圆形。如果你有兴趣，可以尝试更改不同的属性值，并观察效果的变化。