::-webkit-progress-inner-element
非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。
::-webkit-progress-inner-element CSS 偽元素表示 <progress> 元素的最外層容器。它是 ::-webkit-progress-bar 偽元素的父元素。
注意: 為了使 ::-webkit-progress-value 生效,需要將 <progress> 元素的 appearance 設定為 none。
語法
css
::-webkit-progress-inner-element {
/* ... */
}
示例
這些示例僅適用於 Blink 和 WebKit 瀏覽器。
在進度條周圍新增黑色邊框
在此示例中,進度條周圍添加了一個 2px 的黑色邊框。
HTML
html
<progress value="10" max="50"></progress>
CSS
css
progress {
-webkit-appearance: none;
}
::-webkit-progress-inner-element {
border: 2px solid black;
}
結果
結果截圖
如果您使用的不是 Blink 或 WebKit 瀏覽器,則上述程式碼會使進度條看起來像這樣
![]()
規範
不屬於任何標準。
瀏覽器相容性
載入中…
另見
-
WebKit/Blink 用於樣式化
<progress>元素其他部分的偽元素 ::-moz-progress-bar