css中把正方形背景变圆

CSS中可以用border-radius属性轻松将正方形背景变成圆形

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

在上面的代码中，我们使用了border-radius属性来实现将正方形变成圆形。border-radius是一个用于设置边框圆角的属性，它可以接受1~4个值，每个值分别对应左上角、右上角、右下角和左下角的圆角半径。如果只给border-radius设置一个值，则这个值将会被用于所有四个角。

在上述代码中，我们将border-radius设置为50%，这意味着我们希望将所有四个角的半径都设置为正方形宽度的50%。由于我们的正方形宽度和高度是相等的，因此我们最终得到了一个圆形背景。

在实际项目中，我们可以根据需要调整border-radius的值，以达到不同的效果。例如，将border-radius设置为一个比较小的值，可以让背景看起来更加扁平化，而将border-radius设置为一个比较大的值，则可以让背景看起来更加圆润。