[分享]css3怎么设置圆

CSS3是一种强大的样式语言，它提供了多种设置圆形的方法，让我们一起来学习一下吧。

/* 设置圆形 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 设置椭圆形 */
.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50% / 25%;
}

/* 设置正方形 */
.square {
  width: 100px;
  height: 100px;
  border-radius: 0;
}

/* 设置圆角矩形 */
.rounded-rect {
  width: 200px;
  height: 100px;
  border-radius: 20px;
}

/* 设置多个圆角 */
.multiple-rounded-rect {
  width: 200px;
  height: 100px;
  border-radius: 20px 50px 0 0;
} 

在CSS3中，我们可以使用border-radius属性来设置圆形。这个属性有两个值，一个是圆角半径，另一个是椭圆形的水平和垂直半径。

如果我们想要设置一个标准的圆形，只需要将圆角半径设置为元素宽度的50%即可，如上述代码中circle类的示例。

如果我们想要设置一个椭圆形，可以将border-radius的第二个值设置为小于50%的值。例如，上述代码中的ellipse类的示例，横向半径为宽度的一半，纵向半径为高度的四分之一。

如果我们想要设置一个正方形，只需要将border-radius设置为0即可，如上述代码中的square类示例。

如果我们想要设置一个圆角矩形，可以将border-radius的值设置为非零值，如上述代码中的rounded-rect类示例，它有一个20像素的圆角半径。

如果我们只想设置矩形的某些角为圆角，可以设置四个值，分别对应四个角的圆角半径，如上述代码中的multiple-rounded-rect类示例，它只有左上和右上角是圆角。