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

Progress 元素是 HTML5 標準草案中新增的元素之一，W3C 關于此元素的定義請猛擊這里。默認情況下，Progress 會生成一個和系統默認樣式一樣的進度條。Webkit 中對于 Progress 的默認樣式定義在這里可以找到。在 Windows 7 和 MaxOS Lion 中的顯示效果如下：

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

查看了 Webkit 項目中關于 Element Progress 的定義，Progress 在渲染時會被解析成以下結構：

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

通過 ::-webkit-progress-bar 和 ::-webkit-progress-value 兩個偽元素選擇符（之前偽元素的名稱是 ::-webkit-progress-bar-value，今年上半年的某個 Patch 改成了現在這樣，這里可以看到 Chromium 中一個相關的 Issue），可以定義第一層和第二層的兩個 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 可以定義一個如下效果的 Progress Bar：

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