[分享]css中如何画一个圆

CSS中用border-radius属性可以让网页上的元素变成圆形。我们可以通过设置border-radius的值来控制圆角的大小。

圆角矩形：border-radius: 10px;
圆形：border-radius: 50%; 

为了画出一个纯粹的圆，我们需要设置宽度和高度相等的元素，并设置一个足够大的border-radius值。

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

以上代码会在页面上画出一个100像素直径的红色圆形。

如果我们需要一个空心的圆形，我们可以通过设置border样式来实现。

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

以上代码会在页面上画出一个100像素直径的空心圆形，边框为红色。

我们可以通过修改元素的宽度和高度来调整圆形的大小，也可以通过修改border-radius来调整圆角的大小。

在CSS中画圆形非常简单，在网页设计中，使用圆形会使页面看起来更加流畅和美观。