[分享]css中怎么做圆

CSS中如何制作圆？这是一个让许多初学者感到迷惑的问题。下面介绍3种实现圆形的方法。1. 通过borderradius属性 borderradius是CSS3中的一个属性，可以用来设置边框的圆角。如果...

CSS中如何制作圆？这是一个让许多初学者感到迷惑的问题。下面介绍3种实现圆形的方法。

1. 通过border-radius属性
border-radius是CSS3中的一个属性，可以用来设置边框的圆角。如果将它设置为50%就可以将一个矩形变成圆形。代码如下：

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

上述代码中，50%代表了圆的半径等于元素长宽的一半。这种方法的优点在于简单易懂，缺点是无法控制圆环的粗细。

2. 通过伪元素
使用:before或:after伪元素可以制作更加自由的圆形，代码如下：

.circle::before{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f00;
} 

使用伪元素的方法可以灵活控制圆的直径、边框宽度、颜色等。但是这种方法相对繁琐，需要额外写伪元素的样式。

3. 通过clip-path属性
clip-path是CSS3中的另一个属性，可以用来剪切元素的形状。如果将它设置为circle()，就可以将元素剪切成一个圆形。代码如下：

.circle{
    width: 100px;
    height: 100px;
    clip-path: circle(50%);
    background-color: #f00;
} 

使用clip-path的方法最大的优点是可以制作各种图形，相对灵活，缺点是在一些低版本浏览器不支持。