CSS3 圓形統計是一種常見的前端開發技術，可以用于展示各種數據。通過 CSS3 的樣式設計，可以輕松地創建出具有吸引力的圓形統計圖。

<div class="statistic">
<div class="circle">
<div class="progress"></div>
<div class="progress-left">
<div class="progress-bar"></div>
</div>
<div class="progress-right">
<div class="progress-bar"></div>
</div>
<div class="content">
<span class="count">87</span>
<span class="title">Points</span>
</div>
</div>
</div>

以上是圓形統計的 HTML 代碼。使用 CSS3 進行樣式設計之后，可以得到美觀的圓形統計圖。

// outer circle
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #FFFFFF;
box-shadow: inset 0 0 0 15px #F3F3F3;
}
// progress bar
.progress {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 200px, 200px, 100px);
background-color: #1abc9c;
}
// progress-left
.progress-left {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
}
.progress-bar {
position: absolute;
top: 0;
right: 100%;
width: 200%;
height: 100%;
background-color: #1abc9c;
transform-origin: center center;
}
.progress-left .progress-bar {
left: 100%;
top: 0;
transform: rotate(180deg);
}
// progress-right
.progress-right {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
transform: rotate(180deg);
}
// content
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.count {
display: block;
font-size: 36px;
font-weight: bold;
color: #1abc9c;
}
.title {
font-size: 14px;
color: #999;
}

以上是 CSS3 樣式設計的代碼，通過組合以上代碼，可以快速創建出具有吸引力的圓形統計圖，增強頁面的可視化效果。