温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！
CSS可以通过一些技巧将正方形变为圆形。我们可以利用border-radius属性来实现这个效果。border-radius属性可以设置元素的边框圆角，通过将其值设置为50%可以将元素的边框变为圆形。
下面是一个示例代码，展示如何将一个正方形的div元素变为圆形：
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="d990-bbc1-d2bc-b2af square"></div>
</body>
</html>
在上面的代码中，我们创建了一个class为square的div元素，并设置了它的宽度和高度为200像素，背景颜色为红色。通过设置border-radius属性为50%，我们将这个正方形的div元素变为了一个圆形。
除了使用border-radius属性，还可以使用伪元素来实现正方形到圆形的转换。通过添加一个伪元素并设置它的border-radius属性为50%，我们可以将它放置在正方形的div元素上，从而实现圆形的效果。
下面是一个示例代码，展示如何使用伪元素将正方形的div元素变为圆形：
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.square::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="d2bc-b2af-c5ff-fbf1 square"></div>
</body>
</html>
在上面的代码中，我们首先创建了一个class为square的div元素，并设置了它的宽度和高度为200像素，背景颜色为红色。然后，我们使用伪元素::after来创建一个伪元素，并将它的border-radius属性设置为50%。通过设置伪元素的宽度和高度为100%，以及将它的位置设置为绝对定位，并放置在正方形的div元素上方，我们成功将正方形变为了一个圆形。
通过以上两种方法，我们可以将正方形变为圆形，从而实现更加丰富多样的页面效果。
