html5 progress標(biāo)簽如何更改進(jìn)度條顏色？progress進(jìn)度條詳細(xì)說(shuō)明
發(fā)表時(shí)間：2023-09-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章介紹了關(guān)于html5中新出來(lái)的progress進(jìn)度條標(biāo)簽的樣式解析，說(shuō)明了如何通過(guò)html5 progress標(biāo)簽來(lái)改變進(jìn)度條的顏色。接下來(lái)就讓我們一起來(lái)看這篇文章吧首先我們先來(lái)認(rèn)識(shí)下html5 progress標(biāo)簽的簡(jiǎn)介：progress是HTML5的一個(gè)新元素，表示定義一個(gè)進(jìn)度條，用途...
本篇文章介紹了關(guān)于html5中新出來(lái)的progress進(jìn)度條標(biāo)簽的樣式解析，說(shuō)明了如何通過(guò)html5 progress標(biāo)簽來(lái)改變進(jìn)度條的顏色。接下來(lái)就讓我們一起來(lái)看這篇文章吧
首先我們先來(lái)認(rèn)識(shí)下html5 progress標(biāo)簽的簡(jiǎn)介：
progress是HTML5的一個(gè)新元素，表示定義一個(gè)進(jìn)度條，用途很廣泛，可以用在文件上傳的進(jìn)度顯示，文件下載的進(jìn)度顯示，也可以作為一種loading的加載狀態(tài)條使用。
提示：請(qǐng)結(jié)合<progress>標(biāo)簽與javaScript一同使用，來(lái)顯示任務(wù)的進(jìn)度。
注釋：<progress>標(biāo)簽不適合用來(lái)表示度量衡（例如，磁盤(pán)空間使用情況或查詢結(jié)果）。如需表示度量衡，請(qǐng)使用<meter>標(biāo)簽代替。
html5 progress進(jìn)度條語(yǔ)法：
<progress value='70' max='100'></progress>
我們來(lái)準(zhǔn)備個(gè)html5 progress標(biāo)簽的實(shí)例：
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)</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是以如下結(jié)構(gòu)渲染的
progress
:-webkit-progress-bar 全部進(jìn)度
:-webkit-progress-value 已完成進(jìn)度
通過(guò)這兩個(gè)偽元素為其添加樣式。
但在別的瀏覽器中又有所不同，如IE10，這兩個(gè)偽元素不起作用，直接用color樣式可以修改已完成進(jìn)度的顏色，而全部進(jìn)度為background
FireFox中progress-bar為已完成進(jìn)度，background為全部進(jìn)度,而Opera中對(duì)這個(gè)樣式只能為瀏覽器默認(rèn)樣式。
因此兼容性寫(xiě)法可以考慮如下：
progress
{
color:orange; /*兼容IE10的已完成進(jìn)度背景*/
border:none;
background:#d7d7d7;/*這個(gè)屬性也可當(dāng)作Chrome的已完成進(jìn)度背景，只不過(guò)被下面的::progress-bar覆蓋了*/
}
progress::-webkit-progress-bar
{
background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
background:orange;
}以上就是關(guān)于進(jìn)度條的顏色css樣式的代碼了，顯示的效果如下：
好了，以上就是關(guān)于html5中新出來(lái)的progress標(biāo)簽的用法，改變顏色的文章了，有問(wèn)題的可以在下方提問(wèn)。
【小編推薦】
html5 header標(biāo)簽怎么用？html5 header標(biāo)簽的作用介紹
html中的include標(biāo)簽是什么？html include實(shí)現(xiàn)配置解析
以上就是html5 progress標(biāo)簽如何更改進(jìn)度條顏色？progress進(jìn)度條詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
