CSS3炫酷圖表是現代網頁設計趨勢的一部分。圖表可以在網站上展示數據，幫助用戶更好地理解信息。另外，使用CSS3創建圖表可以使網站看起來更現代且更具吸引力。因此，本文將介紹如何使用CSS3創建炫酷圖表。

首先，讓我們看一下如何使用CSS3制作柱形圖。以下是樣式代碼：

.chart {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
width: 100%;
background-color: #F7F7F7;
}
.bar {
width: 50px;
margin: 0 10px;
background-color: #4CAF50;
}
.bar-1 {
height: 150px;
}
.bar-2 {
height: 250px;
}
.bar-3 {
height: 100px;
}

這段代碼將為您創建一個灰色背景的柱狀圖，其中包含三個代表柱子的矩形。在這個例子中，我們使用了flexbox來處理布局，并使用了alignment和justification屬性。

接下來，我們將介紹如何使用CSS3制作餅圖。以下是樣式代碼：

.chart {
height: 200px;
width: 200px;
background-color: #F7F7F7;
border-radius: 50%;
}
.slice {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 100px, 200px, 0);
}
.slice-1 {
background-color: #4CAF50;
transform: rotate(30deg);
}
.slice-2 {
background-color: #2196F3;
transform: rotate(120deg);
}
.slice-3 {
background-color: #9C27B0;
transform: rotate(240deg);
}

這個例子將為您創建一個圓形餅圖，并使用clip屬性將每個分片分離。每個分片都使用不同的背景顏色，使它們在圖表中明確可見。

最后，我們來看一下如何使用CSS3制作折線圖。以下是樣式代碼：

.chart {
height: 300px;
width: 100%;
background-color: #F7F7F7;
}
.line {
stroke-width: 2px;
fill:none;
}
.point {
fill: #4CAF50;
stroke-width: 2px;
stroke: #4CAF50;
}

這個例子將為您創建一個折線圖，其中包含三個點。為了創建折線圖，我們需要使用SVG（Scalable Vector Graphics）元素。此外，我們還使用stroke、stroke-width和fill屬性來控制線和點的樣式。

總之，CSS3圖表是現代網頁設計的重要組成部分。有了這些樣式代碼，您可以輕松地為您的網站添加炫酷的圖表。