CSS是一門用來渲染網頁的語言，它可以通過各種樣式和效果來美化網頁中的各種元素。其中一個比較實用的應用是使用CSS實現餅圖。下面我們就來一步步地實現這個功能。

/* 首先定義一個容器，用來放置餅圖 */
.pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
/* 接下來定義每個扇形的樣式 */
.pie-chart__slice {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0, 100px, 200px, 100px);
transform-origin: center;
}
/* 定義每個扇形的顏色和角度 */
.pie-chart__slice--blue {
clip: rect(0, 100px, 200px, 0);
background-color: blue;
transform: rotate(40deg);
}
.pie-chart__slice--green {
clip: rect(0, 200px, 200px, 100px);
background-color: green;
transform: rotate(60deg);
}
.pie-chart__slice--red {
clip: rect(0, 200px, 200px, 0);
background-color: red;
transform: rotate(80deg);
}
/* 最后來一段Javascript代碼，用來動態計算扇形的角度 */
var slices = document.querySelectorAll('.pie-chart__slice');
var angles = [40, 60, 80];
for (var i = 0; i< slices.length; i++) {
slices[i].style.transform = "rotate(" + angles[i] + "deg)";
}

代碼中涉及到的關鍵點有：

• 使用border-radius屬性定義容器為圓形
• 使用clip屬性定義每個扇形的大小和位置
• 使用transform屬性旋轉扇形
• 使用Javascript計算扇形的角度

通過以上代碼，我們就可以非常簡單地實現一個美觀的餅圖，用來展示各種數據。