首頁 > 文章 > web前端 > html5 progress標籤如何更改進度條顏色？ progress進度條詳解

html5 progress標籤如何更改進度條顏色？ progress進度條詳解

寻∝梦原創: 2018-09-04 10:39:3816304瀏覽

本篇文章介紹了關於html5中新出來的progress進度條標籤的樣式解析，說明如何透過html5 progress標籤來改變進度條的顏色。接下來就讓我們一起來看這篇文章吧

首先我們先來認識下html5 progress標籤的簡介：

progress是HTML5的新元素，表示定義一個進度條，用途很廣泛，可以用在檔案上傳的進度顯示，檔案下載的進度顯示，也可以當作一種loading的載入狀態條使用。

提示：請結合標籤與javaScript一同使用，來顯示任務的進度。

註解：標籤不適合用來表示度量衡（例如，磁碟空間使用情況或查詢結果）。如需表示度量衡，請使用標籤代替。

html5 progress進度條語法：

<progress value=&#39;70&#39; max=&#39;100&#39;></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標籤如何更改進度條顏色？ progress進度條詳解

好了，以上就是關於html5中新出來的progress標籤的用法，改變顏色的文章了，有問題的可以在下面提問。

【小編推薦】

html5 header標籤怎麼用？ html5 header標籤的作用介紹

html中的include標籤是什麼？ html include實作配置解析

以上是html5 progress標籤如何更改進度條顏色？ progress進度條詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css chrome html webkit include 伪元素 background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html中的include標籤是什麼？ html include實作配置解析下一篇：html中的include標籤是什麼？ html include實作配置解析

看更多