CSS中的環形圖是一種特殊的圖形效果，它是由CSS代碼實現的。在實現環形圖時，需要使用CSS3中的transform屬性，以及前綴為-webkit-、-moz-、-o-等屬性，同時也需要使用CSS盒模型、偽元素、過渡效果等技術。

/* 環型區域 */
.circle {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
margin: 50px auto;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) inset;
}
/* 環型背景 */
.circle:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-color: #e5e5e5;
transform: rotate(45deg);
z-index: 1;
}
/* 環型進度 */
.circle:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) inset;
transform-origin: 50% 100%;
z-index: 2;
transition: transform 0.5s ease-in-out;
}
/* 帶百分比的環形進度 */
.circle[data-percent="25"]:after {
transform: rotate(90deg);
}
.circle[data-percent="50"]:after {
transform: rotate(180deg);
}
.circle[data-percent="75"]:after {
transform: rotate(270deg);
}
.circle[data-percent="100"]:after {
transform: rotate(360deg);
}

首先定義了一個class為circle的div標簽，它的寬度和高度都為200px，它的顯示區域為200px x 200px的正方形，而其父元素的寬度為300px。同時指定position屬性值為relative，這是因為后面需要對其內部元素進行絕對定位。由于環形圖是一個圓形，因此給其設置border-radius屬性值為50%，并添加一個陰影效果。

接著，在環形圖圓心部位添加一個偽元素before，它的width和height都為100%，即寬度和高度與環形區域相同。這里需要注意的是，其content屬性值為雙引號，表示此元素沒有實際內容。使用position:absolute將該元素絕對定位在環形圖的頂部，然后將其background-color屬性設置為一種灰色，這里選用的顏色是#e5e5e5，并強制旋轉繞z軸旋轉45度，由此創建出一個斜角中環形圖的背景。

最后，在環形圖內部再添加一個after偽元素，它的操作與before偽元素類似，同樣設置寬度和高度都為100%。在給該元素添加border-radius屬性值為50%以定義其為圓形的基礎上，在其Box-shadow屬性中添加一個垂直陰影，表示進度圓環的區域。在最后進行animate(動畫)效果完成進度環的旋轉。