diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/_doublecolon_-moz-progress-bar | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/_doublecolon_-moz-progress-bar')
-rw-r--r-- | files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..8388422fe2 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,54 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - CSS 伪类 + - 非标准特性 +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a><a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a> <strong><code>::-moz-progress-bar</code></strong> 是{{HTMLElement("progress")}} 元素中,Mozilla独有的特性(<a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla extension</a>),用于对进度条完成的部分进行选择。</p> + +<p>如果你想选择未完成的部分,请直接选择 {{HTMLElement("progress")}} 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="例子">例子</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; notranslate"><progress value="30" max="100">30%</progress> +<progress max="100">Indeterminate</progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">::-moz-progress-bar { + background-color: red; +} + +/* Force indeterminate bars to have zero width */ +:indeterminate::-moz-progress-bar { + width: 0; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<p>上面第一段样式的进度条会如下图所示:</p> + +<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> |