CSS3環狀圖是一種精美的設計，可以通過CSS的transform屬性和偽元素來創建。偽元素可以創建一個圓形容器，然后用transform旋轉它，使其成為一個環狀圖。在這個過程中，我們還可以使用 CSS屬性來控制環狀圖的大小、顏色和邊框，以及使其在頁面中對齊。

/* 在HTML中使用div元素作為環狀圖的容器 */
100%
/* 在CSS中定義環狀圖 */
.ring {
position: relative; /*相對定位*/
display: inline-block; 
line-height: 120px; /*行高*/
width: 120px; /*環狀圖的寬*/
height: 120px; /*環狀圖的高*/
border-radius: 50%;/*半徑50%*/
background-color: #d1d1d1;
text-align: center;
font-size: 24px; /*字體大小*/
font-weight: bold; /*字體加粗*/
color: #000000; /*字體顏色*/
}
.ring:before {
content: ""; /*偽元素*/
position: absolute; /*絕對定位*/
width: calc(120px - 10px);  /*30px是環狀圖邊框的寬度*/
height: calc(120px - 10px);
top: 5px; /*相對于容器的距離*/
left: 5px;
border-radius: 50%; 
border: 5px solid #6cb41d; /*先將邊框設置成空的*/
border-top-color: #ff4500; /*然后只設置上邊框的顏色*/
transform-origin: 50% 50%; /*從元素中心點開始變換*/
animation: spin 2s linear infinite; /*動畫*/
} 
@keyframes spin {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}

環狀圖的CSS代碼可以根據需求進行修改，不僅可以創建一個簡單的環狀圖，還可以添加更多的效果，例如陰影、漸變等，以滿足不同的設計需求。