<pre> <p>CSS3中有很多強(qiáng)大的特性，其中之一就是能夠通過(guò)CSS3實(shí)現(xiàn)柱狀圖的效果。 而這一效果常常用于數(shù)據(jù)統(tǒng)計(jì)、網(wǎng)站分析等場(chǎng)合。那么，如何使用CSS3實(shí)現(xiàn)柱狀圖呢？</p> <p>首先，我們需要了解CSS3中的linear-gradient屬性。該屬性可以創(chuàng)建一個(gè)線性漸變色，我們可以用它來(lái)制作柱狀圖的背景。如下所示</p> <pre> .bar{ background: linear-gradient(to bottom, #fb8d16 0%, #c70039 100%); } </pre> <p>上述代碼使用了漸變色從上到下的線性漸變，其中#fb8d16和#c70039是兩個(gè)不同的顏色值。通過(guò)這個(gè)代碼，我們已經(jīng)制作出了柱狀圖的背景了</p> <p> 接下來(lái)，我們需要制作出柱狀圖的柱子。CSS3中還有一個(gè)屬性，就是transform。通過(guò)這一屬性，我們可以對(duì)某一個(gè)元素進(jìn)行旋轉(zhuǎn)、縮放等操作。而對(duì)于柱狀圖的柱子，我們就可以通過(guò)伸縮變換（scale）的方式實(shí)現(xiàn)。如下所示</p> <pre> .bar .value{ background-color: #fff; transform: scaleY(.5); } </pre> <p>上述代碼中，我們選中了柱狀圖元素的子元素——bar .value，其具有白色背景色。transform: scaleY(.5)則表示將其在垂直方向上縮小了一半。這樣，我們就完成了柱狀圖的柱子效果了！</p> <p>最后，如果需要在柱狀圖上面顯示數(shù)值，我們可以利用CSS3的一些屬性進(jìn)行美化。在柱狀圖中，我們可以使用:before元素，在圖形的上面顯示數(shù)值。</p> <p>下面的代碼示例，我們通過(guò):before元素，實(shí)現(xiàn)了柱狀圖的數(shù)據(jù)展示效果。</p> <pre> .bar .value:before{ position: absolute; top: -20px; content: attr(data-value); font-size: 14px; color: #666; } </pre> <p>上述代碼中，我們選中了柱狀圖元素的子元素——bar .value:before，通過(guò)position: absolute實(shí)現(xiàn)層數(shù)關(guān)系，躍出柱狀圖的范疇。top: -20px表示將數(shù)值向上偏移20像素，content: attr(data-value)則表示在該位置上展示數(shù)據(jù)。通過(guò)這樣的代碼，我們就大功告成了！</p> </pre>