<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; }
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中文網其他相關文章!