[分享]css3怎样做半圆

CSS3提供了多种方式来实现半圆，下面将介绍两种方法。

1. 使用border-radius

 .half-circle {
        width: 100px;
        height: 50px;
        border-radius: 50px 50px 0 0;
    } 

这种方式利用了border-radius的圆角属性，将四个角中的下面两个设置为0，上面两个设置为相同的半径，就可以实现一个上半圆或者下半圆了。

2. 使用伪元素

 .half-circle {
        width: 100px;
        height: 50px;
        position: relative;
    }
    
    .half-circle::before {
        content: ';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50% 50% 0 0;
        background-color: #f00;
    } 

这种方式需要使用伪元素before，将其定位在父元素的顶部，使用border-radius实现圆角效果，同时指定一个背景色即可。