[分享]css中怎么把正方形变成圆形

CSS是网页开发中重要的一个组成部分，它可以让我们为网页添加各种样式。其中，将正方形变成圆形也是CSS中的一项基本技能。.square { width: 100px; height: 100px; b...

CSS是网页开发中重要的一个组成部分，它可以让我们为网页添加各种样式。其中，将正方形变成圆形也是CSS中的一项基本技能。

.square {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.round {
  border-radius: 50%;
} 

在上面的CSS代码中，.square是一个正方形，它的宽度和高度都是100px，背景颜色是红色(#f00)。.round是一个圆形，它的关键点就是border-radius属性。

border-radius是CSS中的一个属性，可以让一个方形边框变成圆形边框，它接收一个参数，表示边框圆角的半径，一般使用百分比值来表示。当radius值为50%时，边框就可以完全覆盖圆形。

因此，我们可以在原来的正方形的基础上增加一个.round类，利用border-radius来使正方形变成圆形。

<div class="square round"></div> 

最终结果就是一个100x100的圆形，形状非常漂亮，可以应用于页面中各种元素的样式设计中。