1. 使用border-radius属性
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}上述代码实现了一个使用border-radius属性创建的红色圆形元素。其中，border-radius的值设为50%就是将元素的宽度和高度设为相等值，从而生成一个圆形。
2. 使用伪元素
.circle{
width: 100px;
height: 100px;
position: relative;
background-color: red;
}
.circle::before{
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: white;
}上述代码实现了一个使用伪元素创建的白色圆形元素下放的红色圆形元素。在这里，使用了position属性的relative和absolute值，相对定位的.circle元素为伪元素的容器；设置了::before伪元素的display为block，top和left值为-10px，使用了border-radius属性设为50%生成一个圆形元素，之后设置了一个白色的背景色，从而实现覆盖在.red-circle元素上的白色圆。
3. 使用transform的scale值
.circle{
width: 100px;
height: 100px;
background-color: red;
transform: scale(1);
border-radius: 50%;
transition: transform .3s ease-in-out;
}
.circle:hover{
transform: scale(1.2);
}上述代码是通过在:hover伪类中对元素进行放大操作，形成圆形元素。这里使用了transform属性来改变元素的缩放比例，并加入了transition属性使得缩放的动画效果更加平滑自然。
总之，以上三种方式实现的圆形元素，总有一种适合你的web开发需求。掌握它们，能够让你在设计中增加视觉效果的同时让代码更加简洁美观。