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

首先，在HTML文件中聲明一個div元素，并使用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);
}
</style>
<div class="ring"></div>

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

繼續添加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元素，用于顯示環形圖的百分比。同時，對該span元素進行樣式設定，并使其水平和垂直居中對齊。

到這里，一個簡單的CSS3環形圖就制作完成了。我們可以根據需要進一步優化樣式，例如在環形圖中間添加圖標或文字，以實現更加豐富的顯示效果。