CSS實(shí)現(xiàn)環(huán)形圖百分比非常簡(jiǎn)單，可以用偽元素來實(shí)現(xiàn)。以下是實(shí)現(xiàn)的具體步驟：

.circle {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background: #ccc;
}
.circle::before,
.circle::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.circle::before {
z-index: 2;
clip: rect(0, 50px, 100px, 0);
background-color: #f00;
}
.circle::after {
clip: rect(0, 100px, 100px, 50px);
background-color: #eee;
}

以上代碼就是實(shí)現(xiàn)環(huán)形圖的主要部分。首先創(chuàng)建一個(gè)圓形容器，并設(shè)置樣式，再創(chuàng)建兩個(gè)偽元素來表示環(huán)形的兩部分。

其中，before偽元素表示紅色部分，after偽元素表示灰色部分。通過clip屬性，可以將偽元素裁剪成環(huán)形。然后通過設(shè)置z-index來達(dá)到顏色重疊效果，這樣就能實(shí)現(xiàn)環(huán)形圖百分比。

最后，我們只需要在HTML文件中創(chuàng)建一個(gè)circle類名的