在網頁設計中，經常要用到各種形式的統計圖表，在這些圖表中，柱狀圖是一種比較常見的圖表類型。實現柱狀圖的方式有很多種，本文將介紹一種用 CSS 制作柱狀圖的方法。

首先，我們需要先準備好 HTML 結構：

<div class="chart">
<div class="bar" style="height: 80%;"></div>
<div class="bar" style="height: 60%;"></div>
<div class="bar" style="height: 40%;"></div>
<div class="bar" style="height: 20%;"></div>
</div>

上面的代碼中，我們使用了一個外層的 div 容器來包裹柱狀圖的所有子元素。每個子元素都是一個 div，它們的高度分別代表柱狀圖的數據。其中，class 屬性為 "bar" 的 div 代表柱子，它們的高度使用 style 屬性來設置，可以根據需求設置。

接下來，我們就可以用 CSS 來為這些元素添加樣式了：

.chart {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
}
.bar {
width: 50px;
margin: 0 10px;
background-color: #5cb85c;
}

上面的代碼中，我們為外層容器 .chart 設置了一些屬性，讓子元素能夠進行 flex 布局，垂直方向對齊方式為底部對齊，高度為 300px。對于每個柱子 .bar，我們設置了寬度、外邊距和背景顏色等屬性，這樣就形成了一個簡單的柱狀圖。

需要注意的是，上面的代碼只是一個簡單的例子，實際使用中，我們可能需要為柱子設置一些更復雜的樣式，比如陰影、圓角等效果。此外，如果柱子比較多，可能需要使用循環或者 JavaScript 等方法來生成代碼，以提高效率。

綜上所述，使用 CSS 制作柱狀圖是一種比較簡單且常用的方法，它的優點是靈活、易于控制和維護。但是，需要注意的是，柱狀圖的樣式設置需要謹慎，以確保視覺效果達到預期。