html5中progress標籤的CSS樣式總結

黄舟
發布: 2017-07-08 14:08:29
原創
1761 人瀏覽過

HTML5中新增了progress標籤,用來表示進度條

<progress value="100" max="100" class="hot">
登入後複製

 顯示效果如下:

其中CSS樣式程式碼如下:


##

progress{
        width: 168px;
    height: 5px;
        
}progress::-webkit-progress-bar{
       background-color:#d7d7d7;
}progress::-webkit-progress-value{
     background-color:orange;
}
登入後複製

#在解釋下,在Chrome瀏覽器中

progress是以如下結構渲染的

progress

::-webkit-progress-bar 全部進度

::-webkit-progress-value 已完成進度

#透過這兩個偽元素為其新增樣式。

但在別的瀏覽器中又有所不同,如IE10,這兩個偽元素不起作用,直接用color樣式可以修改已完成進度的顏色,而全部進度為background

FireFox中progress-bar為已完成進度,background為全部進度,而Opera中對這個樣式只能為瀏覽器預設樣式。

因此相容性寫法可以考慮如下


progress{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景,只不过被下面的::progress-bar覆盖了*/      
   }progress::-webkit-progress-bar{
   background:#d7d7d7;
}progress::-webkit-progress-value,
progress::-moz-progress-bar{
     background:orange;
}
登入後複製

以上是html5中progress標籤的CSS樣式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板