自訂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 全係不支援此元素（這簡直是一定的）。

以上是自訂HTML5 Progress的樣式的圖文程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！