自定義HTML5 Progress的樣式的圖文代碼詳解

Progress 元素是 HTML5 標(biāo)準(zhǔn)草案中新增的元素之一，W3C 關(guān)于此元素的定義請猛擊這里。默認(rèn)情況下，Progress 會生成一個(gè)和系統(tǒng)默認(rèn)樣式一樣的進(jìn)度條。Webkit 中對于 Progress 的默認(rèn)樣式定義在這里可以找到。在 Windows 7 和 MaxOS Lion 中的顯示效果如下：

看起來貌似還不錯(cuò)，但是如果運(yùn)行在 Windows XP 下呢？想一下就夠頭疼了，何況出于一致性的考慮，很多情況下我們還是想能夠控制這個(gè)進(jìn)度條的樣式。

查看了 Webkit 項(xiàng)目中關(guān)于 Element Progress 的定義，Progress 在渲染時(shí)會被解析成以下結(jié)構(gòu)：

<progress>      ┗ <p> ::-webkit-progress-bar           ┗ <p>::-webkit-progress-value

通過 ::-webkit-progress-bar 和 ::-webkit-progress-value 兩個(gè)偽元素選擇符（之前偽元素的名稱是 ::-webkit-progress-bar-value，今年上半年的某個(gè) Patch 改成了現(xiàn)在這樣，這里可以看到 Chromium 中一個(gè)相關(guān)的 Issue），可以定義第一層和第二層的兩個(gè) p 的樣式。

示例：

progress {      border-radius: 2px;      border-left: 1px #ccc solid;      border-right: 1px #ccc solid;      border-top: 1px #aaa solid;      background-color: #eee;  }     progress::-webkit-progress-bar {      background-color: #d7d7d7;  }     progress::-webkit-progress-value {      background-color: #aadd6a;  }

以上 CSS 可以定義一個(gè)如下效果的 Progress Bar：

同時(shí)支持 CSS 動畫、背景圖片等特性哦，這樣就可以根據(jù)自己的需要打造一個(gè)完全個(gè)性化的 Progress Bar 了。另外 Gecko 核心的瀏覽器也可以通過一個(gè)類似的偽元素 ::-moz-progress-bar 來實(shí)現(xiàn)同樣的效果。IE 全系不支持此元素（這簡直是一定的）。