.circle{ width: 200px; height: 200px; border-radius: 50%; background-color: red; }
上面是一个简单画圆的CSS代码,其中circle为类名。宽高为200px,而border-radius则是圆形的关键属性,可以设定为50%。在这里背景色也设定为红色。
<div class="circle"></div>
加上以上HTML代码就可以进行展示了。这里使用了div标签,并指定类名为circle。因为CSS画的是圆形背景,所以需要一个空的div作为圆形container,用于展示CSS画的效果。
因此,以上就是CSS和HTML画圆的简单方法了。CSS的border-radius属性可以实现很多圆角效果,但是它把方框变圆的同时也将圆形分成顶、右、底、作四个角落。因此,宽和高必须相等才能画一个标准的圆。