首先我們先來認識下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 >
解釋下，在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進度條詳解的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。