CSS是網(wǎng)頁(yè)設(shè)計(jì)中重要的一部分，其中之一就是餅狀圖的實(shí)現(xiàn)。接下來(lái)，我們將講解CSS如何實(shí)現(xiàn)餅狀圖。

.pie-chart {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)包含餅狀圖的容器。在這個(gè)容器中，我們需要設(shè)置其寬度和高度，并使用border-radius屬性設(shè)置其為一個(gè)圓形。然后，使用overflow:hidden屬性讓其超出部分隱藏。

.pie-chart::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
}
.pie-chart.active::before {
background-color: #f00;
background-image: linear-gradient(to right, transparent 50%, #fff 50%);
transform: rotate(45deg);
}

接下來(lái)，我們需要使用偽元素::before來(lái)創(chuàng)建一個(gè)灰色的圓。當(dāng)我們點(diǎn)擊該容器后，我們需要將其設(shè)置為活動(dòng)狀態(tài)，此時(shí)需要將灰色圓的背景色改為紅色，并使用linear-gradient屬性將其分成兩半，并使用transform屬性將其旋轉(zhuǎn)45度。

.button {
display: block;
margin: 20px auto;
padding: 10px 20px;
width: max-content;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
}

最后，我們需要添加一個(gè)按鈕，讓我們能夠切換餅狀圖的狀態(tài)。這個(gè)按鈕需要設(shè)置為塊級(jí)元素，并設(shè)置一些基本樣式，如邊框、邊框圓角、光標(biāo)樣式等。

現(xiàn)在，我們已經(jīng)完成了CSS實(shí)現(xiàn)餅狀圖的全部步驟。你可以嘗試運(yùn)行這些代碼，看看它們的效果。