css3完成條狀百分比效果

效果圖就是上方所示了，整個(gè)長條表示100%，綠色的部分表示該條目占比，鼠標(biāo)移到該長條上時(shí)，顯示百分比(title屬性設(shè)置)
首先這個(gè)百分比，你要計(jì)算出來。
該條狀，我用的是Label來進(jìn)行顯示，設(shè)置其background即可。用什么容器并不固定，根據(jù)自己布局需要，但是確定的一點(diǎn)是容器的寬度必須設(shè)置。
設(shè)置背景顏色的代碼入下：
background:linear-gradient(to right, green 33.90%, #9e9e9e70 33.90%)
linear-gradient表示線性漸變，三個(gè)參數(shù)設(shè)置，第一個(gè)參數(shù)為方向to left：

設(shè)置漸變?yōu)閺挠业阶�。相�?dāng)于: 270deg
to right：
設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：
設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：
設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫。

后面為顏色設(shè)定，顯而易見了，兩個(gè)顏色，色值后跟該顏色的百分比，兩個(gè)百分比一致即可，否則會(huì)出現(xiàn)一部分兩個(gè)顏色的線性漸變。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

css3陰影的詳解

JavaScript的數(shù)組使用集合

javaScript容易被忽略的知識(shí)點(diǎn)

怎樣用canvas繪制星空,月亮,大地,添加文字

以上就是css3實(shí)現(xiàn)條狀百分比效果的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！