CSS餅狀圖是一種利用CSS樣式和HTML結(jié)構(gòu)來(lái)繪制餅狀圖的方法，它通常用于展示不同類別的數(shù)據(jù)比例，下面是如何使用CSS來(lái)制作餅狀圖：

1、HTML結(jié)構(gòu)：我們需要一個(gè)HTML元素來(lái)承載餅狀圖，我們可以使用div元素，并給它一個(gè)類名，比如pie-chart。

<div class="pie-chart"></div>

2、CSS樣式：我們使用CSS來(lái)繪制餅狀圖，我們需要定義一些基本的樣式，比如餅狀圖的大小、顏色等。

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background-color: #eee;
}

3、添加切片：我們需要添加切片到餅狀圖中，我們可以使用偽元素::before和::after來(lái)創(chuàng)建切片。

.pie-chart::before,
.pie-chart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

4、設(shè)置切片顏色：我們可以使用CSS的linear-gradient函數(shù)來(lái)設(shè)置切片的顏色，這個(gè)示例中，我們將使用兩個(gè)顏色來(lái)創(chuàng)建切片。

.pie-chart::before {
  background: linear-gradient(to right, #f00 50%, #0f0 50%);
}

5、添加文本標(biāo)簽：我們可以添加一些文本標(biāo)簽到餅狀圖上，以顯示每個(gè)切片的數(shù)據(jù)，這些標(biāo)簽通常放在餅狀圖的下方。

<div class="pie-chart">
  <div class="label">標(biāo)簽1</div>
  <div class="label">標(biāo)簽2</div>
</div>

6、樣式化標(biāo)簽：我們可以使用CSS來(lái)樣式化這些標(biāo)簽，比如設(shè)置它們的顏色、字體大小等。

.label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 14px;
}