[分享]css中div设置为圆形

CSS中，div可以通过设置其borderradius属性为50来实现将一个正方形div变为圆形。该属性指定了div四个角的曲率，50的取值意味着每个角的曲率半径都等于div宽度和高度的一半。div ...

CSS中，div可以通过设置其border-radius属性为50%来实现将一个正方形div变为圆形。该属性指定了div四个角的曲率，50%的取值意味着每个角的曲率半径都等于div宽度和高度的一半。

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
} 

上述代码将一个100x100像素的div设置为圆形。此外，我们还可以通过设置为不同的值来实现椭圆形、圆角矩形等形状。

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

/*圆角矩形*/
div {
  width: 200px;
  height: 100px;
  border-radius: 20px;
} 

此外，我们还可以通过添加边框、背景色等样式来美化圆形的div。

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #f1f1f1;
} 

最后，需要注意的是，通过设置border-radius属性制作圆形div可能会影响性能，因此最好在实际使用中适度使用。