CSS環形圖是一種常見的數據可視化形式，通過使用CSS編寫遮罩和旋轉動畫來制作，是頁面中非常醒目的元素。接下來將介紹如何使用CSS制作環形圖。

.circle{
width: 200px;/*環形圖的寬度*/
height: 200px;/*環形圖的高度*/
position: relative;
margin: 50px auto;/*使環形圖居中*/
}
.circle .mask{
position: absolute;
top:0;
left:0;
width: 50%;
height: 100%;
background-color: #fff;
transform-origin: left top;
animation: myrotate 2s linear infinite;
}
.circle .filled{
position: absolute;
top:0;
left:0;
width: 50%;
height: 100%;
background-color: #007acc;
transform-origin: left top;
}
@keyframes myrotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}

上面的代碼是用來制作環形圖的CSS，下面是使用HTML實現環形圖：

<div class="circle">
<div class="mask"></div>
<div class="filled"></div>
</div>

在上面的代碼中，我們創建了一個類名為circle的div，寬高是200px，同時給它添加了相對定位。我們接著創建一個類名為mask的div，寬度為50%，高度100%，并設置它的背景色為白色。為了讓環形圖轉動起來，我們要用到CSS3中的動畫，所以給它添加了旋轉動畫。然后我們創建一個類名為filled的div，寬度也是50%，高度100%且背景色為藍色，它是我們最終要顯示的填充部分。

接下來，我們在HTML中使用上面的代碼來實現環形圖。我們只需要將類名為circle的div放入頁面中即可。如果需要更改環形圖的外形，只需要更改CSS中的代碼即可。