CSS是既強大又靈活的語言，可以用它來美化網頁、改變樣式，并為網頁添加各種效果。下面是如何使用CSS制作七餅圖的代碼。

#chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5f5f5;
}
#chart span {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform-origin: center;
border-radius: 50%;
box-shadow: 0 0 0 10px #f5f5f5 inset;
}
#chart span:nth-child(1) {
transform: rotate(0deg);
border-top-left-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset, 
0 -100px 0 #F44336;
}
#chart span:nth-child(2) {
transform: rotate(60deg);
border-bottom-left-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
70.71px -70.71px 0 #E91E63;
}
#chart span:nth-child(3) {
transform: rotate(120deg);
border-bottom-right-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
100px 0px 0 #9C27B0;
}
#chart span:nth-child(4) {
transform: rotate(180deg);
border-top-right-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
70.71px 70.71px 0 #2196F3;
}
#chart span:nth-child(5) {
transform: rotate(240deg);
border-top-left-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
-70.71px 70.71px 0 #4CAF50;
}
#chart span:nth-child(6) {
transform: rotate(300deg);
border-bottom-left-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
-100px 0px 0 #FFC107;
}
#chart span:nth-child(7) {
transform: rotate(360deg);
border-bottom-right-radius: 0;
box-shadow: 0 0 0 10px #f5f5f5 inset,
-70.71px -70.71px 0 #FF5722;
}

首先在HTML文件中創建一個id名為chart的div，并添加七個span元素（每個部分對應一個span）。CSS中設定chart的width和height為200px，還為chart的border-radius、background-color進行設定；span設置了position:absolute，通過設置它們的top和left屬性以及transform-origin的值來使它們都處于圓心的位置。最后，為每個span設置不同的角度值和陰影樣式，就可以得到一個漂亮的七餅圖了。