首先我們先來認識下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>topic.alibabacloud.com</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標籤的用法，改變顏色的文章了，有問題的可以在下方提問。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
