CSS3環形統計圖是一種用于展示數據信息的獨特樣式，它可以使數據更加直觀地呈現出來。在CSS3中，我們可以利用眾多的屬性，包括邊框樣式、背景漸變等，來制作出一個美觀、實用的環形統計圖。下面我們來看一下它的制作方法。
<div class="chart-container"><div class="chart-segment" data-value="60">60%</div><div class="chart-segment" data-value="40">40%</div><div class="chart-clip"><div class="chart-fill">
上述代碼中包含了四個div元素。第一個和第二個元素是用于顯示環形圖中的每一個數據段落的，同時，它們也用data-value屬性表示這個數據段的百分比。第三個元素是用于構建環形統計圖的輪廓的，它同時也定義了一個clip屬性以便于后續的填充。最后一個元素是用于填充環形圖的，它可以通過CSS的屬性調整來確定填充效果。
.chart-container {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.chart-segment {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #666;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.chart-segment:nth-child(1) {
transform: rotate(0deg);
clip: rect(0, 100px, 200px, 0);
}
.chart-segment:nth-child(2) {
transform: rotate(60deg);
clip: rect(0, 100px, 200px, 0);
}
.chart-clip {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 100px, 200px, 0);
}
.chart-fill {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, #d1d1d1, #fff 60%);
transform: rotate(-10deg);
clip: rect(0, 100px, 200px, 0);
}
.chart-value {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, #333, #000 60%);
transform: rotate(-30deg);
clip: rect(0, 100px, 200px, 0);
}上述CSS代碼中的注釋已經解釋了大部分屬性的作用，這里再稍稍闡述一下radial-gradient屬性：它實現了一個徑向漸變的效果，它的第一個值表示的是漸變的圓形方向，而后兩個值則表示起點和終點的顏色。
最后附上我們制作出來的環形統計圖效果：
60%
40%