在網頁設計中，常常需要添加各種圖表來表現數據或展示設計元素。其中，條形圖是一種常用的數據可視化形式，能夠有效地傳達數據信息。接下來，我們就來看看如何使用CSS添加條形圖。

.bar {
width: 300px; /*設置條形圖容器的寬度*/
height: 20px; /*設置條形圖容器的高度*/
background-color: #ccc; /*設置條形圖容器的背景色*/
position: relative; /*設置元素相對定位*/
}
.bar span {
display: block; /*將span元素設置為塊級元素*/
height: 100%; /*設置span元素高度為100%*/
background-color: #f00; /*設置span元素的背景顏色*/
position: absolute; /*設置元素絕對定位*/
top: 0; /*距離父容器頂部0px*/
left: 0; /*距離父容器左側0px*/
}
/*設置不同比例的條形圖元素*/
.one { width: 30%; }
.two { width: 50%; }
.three { width: 70%; }
.four { width: 90%; }

上述代碼中，我們以.bar作為條形圖的容器，設置了它的寬度、高度和背景色，并將它的position屬性設置為relative相對定位，以便讓其中的span元素能夠定位在它的內部。同時，我們設置.span元素的height屬性為100%，并將它的position屬性設置為absolute絕對定位，這樣就可以讓它覆蓋整個容器。接著，我們設置了不同比例的條形圖元素，它們分別擁有不同的寬度，以便呈現不同的數據。

在實際應用中，我們只需要按照自己的需求，調整容器和元素的樣式和比例，就可以輕松地創建和添加自己所需的條形圖了。