CSS3在網(wǎng)頁設(shè)計(jì)中有著越來越廣泛的應(yīng)用，不僅可以美化頁面，還能制作出各種不同樣式的圖表，其中就包括空心餅圖。

空心餅圖是由圓形區(qū)域組成的圖表，中間為空心的，通常用來展示各個(gè)部分所占比例。

下面我們就來一起學(xué)習(xí)如何使用CSS3制作出空心餅圖吧。

.pie-chart {
width: 300px;
height: 300px;
position: relative;
border-radius: 50%;
border: 20px solid #eee;
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
.pie-chart:before {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 0;
background: #00a1cb;
border-radius: 0 100% 100% 0 / 50%;
transform-origin: left center;
transform: rotate(0deg);
}
.pie-chart:after {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
background: #ee4c4c;
border-radius: 100% 0 0 100% / 50%;
transform-origin: right center;
transform: rotate(0deg);
}
.percent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
color: #333;
}
.percent:before {
content: "";
width: 60%;
height: 60%;
position: absolute;
background: #fff;
border-radius: 50%;
}

上面的代碼中，我們使用了偽元素:before和:after，以及transform屬性和border-radius屬性等，來制作出空心餅圖的效果。

最后再添加一個(gè)js動(dòng)畫效果，以便更加生動(dòng)地展示數(shù)據(jù)。具體代碼可自行查閱。

通過這樣的方式，我們就可以輕松制作出一個(gè)美觀實(shí)用的空心餅圖啦！