CSS是網頁設計中常用的樣式表語言，可以實現很多有趣的效果，包括制作圖表。本文將介紹如何使用CSS制作一個簡單的柱形圖。
<div class="chart"> <div class="bar" style="height: 60%;"></div> <div class="bar" style="height: 80%;"></div> <div class="bar" style="height: 40%;"></div> <div class="bar" style="height: 20%;"></div> </div>
上面的代碼定義了一個
容器，其中包含四個
元素作為柱形圖的四個柱子。我們使用CSS給每個柱子添加了高度（height）屬性，來控制它們的高度。相應地，我們可以通過增加或減少高度來更改柱子的長度。
.chart {
width: 300px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.bar {
width: 20%;
background-color: #4286f4;
border-radius: 3px;
}這里我們在CSS樣式表中對柱形圖進行了更詳細的定義。我們使用了.flex（彈性）布局來讓四個柱子在容器內等分空間。為了使柱子看起來更光滑，我們 給它們添加了一個小的圓角（border-radius）。最后，我們用背景顏色來區分不同的柱子。
這是一個簡單的柱形圖的示例，它將為您提供在CSS中創建圖表的基礎知識。開始嘗試制作自己的圖表吧!
上一篇用css3畫動態的人
下一篇瑞士保險css