在Web設(shè)計(jì)中，圓形百分比圖是一種經(jīng)常使用的數(shù)據(jù)可視化方式。在CSS中制作圓形百分比圖也是一件很簡單的事情。下面我們來看一下具體的制作方法。

HTML代碼如下：
<div class="chart">
<div class="percent">70%</div>
<div class="circle">
<div class="dot"></div>
</div>
</div>
CSS代碼如下：
.chart{
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
}
.percent{
width: 200px;
text-align: center;
font-size: 40px;
font-weight: bold;
position: absolute;
top: 50%;
margin-top: -20px;
}
.circle{
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid #F4F4F4;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
.dot{
width: 120px;
height: 120px;
border-radius: 50%;
clip: rect(0px, 60px, 120px, 0px);
position: absolute;
top: -10px;
left: -10px;
background-color: #E74C3C;
transform: rotate(45deg);
}

在上面的代碼中，我們首先創(chuàng)建了一個帶有.chart類的div，然后在其中添加帶有.percent和.circle類的子元素。其中.percent用于顯示百分比數(shù)字，.circle是百分比圖表的主體。

下面來依次解釋CSS代碼中的幾個關(guān)鍵部分：

1. 相對定位：.chart的position屬性被設(shè)置為relative，此處使用相對定位是為了方便后面的絕對定位和居中設(shè)置。

2. 絕對定位：.percent和.circle的position屬性均被設(shè)置為absolute，這樣它們就可以相對于父元素.chart進(jìn)行定位。

3. 水平垂直居中：通過設(shè)置.top和.left，我們可以使.percent和.circle水平垂直居中顯示。

4. 圓形邊框：通過設(shè)置.circle的border-radius為50%可以使它變成一個圓形。同時(shí)，我們還可以通過border屬性來設(shè)置邊框的大小和顏色。

5. 圓形百分比圖：我們可以使用.clip屬性來裁剪.dot，從而實(shí)現(xiàn)圓形百分比圖。具體來說，我們可以通過.clip屬性來設(shè)置.dot的裁剪區(qū)域。上述代碼中，我們使用了一個長方形的裁剪區(qū)域，其大小和位置正好與.dot相同，這樣就能夠完整地顯示出.dot中的一部分。

最后，我們得到了一個非常簡潔優(yōu)雅的圓形百分比圖。你可以根據(jù)自己的需求進(jìn)行修改，比如更改顏色、大小、精度等等。