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画出了两个圆形。如果你有兴趣,可以尝试更改不同的属性值,并观察效果的变化。
粉丝
0
关注
0
收藏
0