在前端開發(fā)中，經(jīng)常需要繪制各種形狀的圖表，其中環(huán)形圖也是較為常見的一種。今天我們來分享一種使用CSS3純手工繪制環(huán)形圖的方式。

首先，在HTML文件中聲明一個div元素，并使用CSS樣式進(jìn)行預(yù)設(shè)：

<style>
.ring {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
border: 20px solid #e0e0e0;
}
.ring::before {
content: "";
display: block;
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
top: 10px;
left: 10px;
box-sizing: border-box;
border: 20px solid #40e0d0;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
</style>
<div class="ring"></div>

該樣式代碼定義了一個200x200像素的div元素，具有圓形邊框，并將其位置設(shè)為相對定位。在該元素的before偽元素上繪制另一個圓形，并使其向左上方旋轉(zhuǎn)45度，使其只顯示環(huán)形圖的一部分。

繼續(xù)添加CSS樣式：

<style>
.ring {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
border: 20px solid #e0e0e0;
}
.ring::before {
content: "";
display: block;
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
top: 10px;
left: 10px;
box-sizing: border-box;
border: 20px solid #40e0d0;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.ring span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: #40e0d0;
}
</style>
<div class="ring">
<span>75%</span>
</div>

在div元素中添加了一個span元素，用于顯示環(huán)形圖的百分比。同時，對該span元素進(jìn)行樣式設(shè)定，并使其水平和垂直居中對齊。

到這里，一個簡單的CSS3環(huán)形圖就制作完成了。我們可以根據(jù)需要進(jìn)一步優(yōu)化樣式，例如在環(huán)形圖中間添加圖標(biāo)或文字，以實現(xiàn)更加豐富的顯示效果。