css3画半圆进度条 |css 子节点偶数奇数

.progress {
position: relative;
width: 250px;
height: 125px;
overflow: hidden;
box-sizing: border-box;
border-radius: 125px;
background-color: #ddd;
}
.progress:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 125px;
background-color: #13CE66;
z-index: 1;
transform-origin: 50% 50%;
transform: rotate(-180deg);
}
.progress:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 125px;
background-color: #fff;
z-index: 2;
}
.progress span {
display: block;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
}
.progress.p40:after {
transform: rotate(-144deg);
}
.progress.p60:after {
transform: rotate(-108deg);
}
.progress.p80:after {
transform: rotate(-72deg);
}
.progress.p100:after {
transform: rotate(-36deg);
}

以上是一个画半圆进度条的CSS代码，其中一个关键点是利用了伪元素`:before`和`:after`来分别实现底部和上面的颜色。进度条是通过使用`transform: rotate()`来控制的。

使用方法也很简单，首先在HTML文件中添加如下代码：

<div class="progress p40">
<span>40%</span>
</div>

在div标签的class属性中添加进度百分比即可。例如上面的代码展示的就是40%的进度条。

半圆进度条常常用于展示下载进度、上传进度等业务场景，它不仅美观而且非常实用。