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

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

 progress  ┗ p ::-webkit-progress-bar ┗ p ::-webkit-progress-html' target='_blank'>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 全系不支持此元素（這簡直是一定的）。

以上就是自定義html中Progress的樣式的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。