CSS是一種對網頁進行排版和風格設置的語言，它可以幫助我們創建出各種酷炫的效果，其中之一就是環形圖。

實現環形圖的方式有很多，比如可以使用canvas元素、JavaScript腳本等，但在這里，我們將介紹一種使用純CSS的方法，讓你可以輕松地實現一個漂亮的環形圖。

/* 首先，我們需要創建一個容器來承載環形圖 */
.circle {
width: 200px;
height: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* 接下來，我們創建兩個偽元素，分別代表環形圖的上面一半和下面一半 */
.circle::before, .circle::after {
content: "";
width: 100%;
height: 50%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform-origin: bottom;
}
/* 對上面一半的偽元素進行處理，使其呈現一個半圓形 */
.circle::before {
background-color: #f00;/* 將背景顏色設置成紅色 */
transform: rotate(0deg);
z-index: 2;
}
/* 對下面一半的偽元素進行處理，使其呈現一個空心的圓形 */
.circle::after {
background-color: #fff;/* 將背景顏色設置成白色 */
border: 20px solid #f00;/* 將邊框設置成紅色 */
transform: rotate(180deg);
z-index: 1;
}
/* 最后，我們設置一個里面的元素，用來顯示環形圖的進度 */
.progress {
width: 80%;
height: 80%;
background-color: #fff;/* 將背景顏色設置成白色 */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
}

以上是一個簡單的CSS環形圖實現過程，可以靈活調整各種參數來適配不同的需求。