From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../_doublecolon_-webkit-progress-value/index.html | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html (limited to 'files/zh-cn/web/css/_doublecolon_-webkit-progress-value') diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..af7bd3b5bd --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,67 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - 伪元素 + - 参考 + - 非标准 +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
::-webkit-progress-value CSS 伪元素 代表的是{{HTMLElement("progress")}} 元素中进度条未完成的部分。它是{{cssxref("::-webkit-progress-bar")}} 伪元素的子元素。
+ +
+ +
+

注意: 为了使 ::-webkit-progress-value 生效, <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。

+
+ +

说明

+ +

不属于任何规范。这是WebKit/Blink专有的一个伪元素。

+ +

示例

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

应用了上述样式的进度条如下:

+ +

+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf