- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 3Adobe Illustrator CS5 序列號大全
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 6Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 7Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 8最新的Adobe Illustrator CS4序列號大全
- 9Intel i7-9700K性能跑分曝光：同代提升約12%
- 10qq郵件是否已讀怎么看 QQ郵箱已經發出去的郵件怎么知道對方是否已經查看
- 11XP系統怎么清除緩存？
- 12AMD推土機架構回顧：雖隕落卻是Zen成功的墊腳石
[摘要]本篇文章介紹了關于html5中新出來的progress進度條標簽的樣式解析，說明了如何通過html5 progress標簽來改變進度條的顏色。接下來就讓我們一起來看這篇文章吧首先我們先來認識下html5 progress標簽的簡介：progress是HTML5的一個新元素，表示定義一個進度條，用途...
本篇文章介紹了關于html5中新出來的progress進度條標簽的樣式解析，說明了如何通過html5 progress標簽來改變進度條的顏色。接下來就讓我們一起來看這篇文章吧首先我們先來認識下html5 progress標簽的簡介：
progress是HTML5的一個新元素，表示定義一個進度條，用途很廣泛，可以用在文件上傳的進度顯示，文件下載的進度顯示，也可以作為一種loading的加載狀態條使用。
提示：請結合<progress>標簽與javaScript一同使用，來顯示任務的進度。
注釋：<progress>標簽不適合用來表示度量衡（例如，磁盤空間使用情況或查詢結果）。如需表示度量衡，請使用<meter>標簽代替。
html5 progress進度條語法：
<progress value='70' max='100'></progress>
我們來準備個html5 progress標簽的實例：
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網</title>
<style type="text/css">
progress{
width: 168px;
height: 5px;
}
progress::-webkit-progress-bar
{
background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>解釋下，在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;
}以上就是關于進度條的顏色css樣式的代碼了，顯示的效果如下：
好了，以上就是關于html5中新出來的progress標簽的用法，改變顏色的文章了，有問題的可以在下方提問。
【小編推薦】
html5 header標簽怎么用？html5 header標簽的作用介紹
html中的include標簽是什么？html include實現配置解析
以上就是html5 progress標簽如何更改進度條顏色？progress進度條詳解的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
推薦資訊 總人氣榜
相關文章
- 在html中如何點出head標簽？head標簽中包含的元素有哪一些？
- HTML button標簽是否有超鏈接？這有button標簽設置超鏈接的案例
- HTML如何自定義dialog背景？一篇文章教你如何自定義dialog！
- html frame標簽如何使用？frame標簽的用法說明（附案例）
- html中的head標簽在什么地方里找？head標簽的作用總結
- html中b標簽與strong標簽的區別是什么？b與strong區別的總結
- HTML <a> download屬性使用方法詳細說明
- xhtml與html之間有什么區別？xhtml與html之間的異同區分
- html中的document對象是什么？一篇文章讓你知道document對象
- html font標簽如何設置字體大小？html font標簽屬性用法說明
- HTML中添加圖片的代碼是什么？html如何正確的添加圖片路徑？
- HTML中的圖片如何自適應屏幕？這篇文章有圖片的自適應用法說明
