initial commit

1 files changed, 1858 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/appearance/index.html b/files/zh-cn/web/css/appearance/index.html
new file mode 100644
index 0000000000..00980a5dea
--- /dev/null
+++ b/files/zh-cn/web/css/appearance/index.html
@@ -0,0 +1,1858 @@
+---
+title: '-moz-appearance (-webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - CSS
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p>在基于 Gecko 的浏览器（如 Firefox）中，<strong><code>-moz-appearance</code></strong> CSS 属性被用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。</p>
+
+<p>在基于 WebKit 的浏览器（如 Safari）和基于 Blink 的浏览器（如 Chrome, Opera）中，<strong><code>-webkit-appearance</code></strong> 属性被用于达到相同 to achieve the same thing. Note that Edge also supports <code>-webkit-appearance</code> (instead of <code>-ms-appearance</code>) for compatibility reasons.</p>
+
+<pre class="brush: css">/* 在 Gecko 中可用的部分值 */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* 在 WebKit/Blink 中可用的部分值 */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+</pre>
+
+<p>这个属性经常用在 <a href="/zh-CN/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> 的样式表中，用来设计拥有平台原生UI样式的自定义的组件，也用于 <a href="/zh-CN/docs/XBL">XBL</a> 之中以实现 Mozilla 平台的组件。</p>
+
+<div class="note">
+<p><strong>兼容性提示</strong>：如果您想在网站上使用此属性，您应非常小心地测试它。尽管在大部分现代浏览器中它是被支持的，它的实现差别很大。在版本较旧的浏览器中，即使是 <code>none</code> 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<p>The <code>-moz-appearance</code> 属性may be specified as a single value chosen from the list below.</p>
+
+<h3 id="取值">取值</h3>
+
+<p><code>&lt;appearance&gt;</code> 是其中的一个关键字:</p>
+
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th>Value</th>
+			<th>Demo</th>
+			<th>Browser</th>
+			<th>Description</th>
+		</tr>
+		<tr>
+			<td><code>none</code></td>
+			<td>
+			<div id="sampleNone" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;
+</pre>
+			</div>
+			{{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+			<td>All</td>
+			<td>不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。</td>
+		</tr>
+		<tr>
+			<td><code>button</code></td>
+			<td>
+			<div id="sampleButton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td>此元素将被作为按钮来绘制。</td>
+		</tr>
+		<tr>
+			<td><code>button-arrow-down</code></td>
+			<td>
+			<div id="sampleButtonArrowDown" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>button-arrow-next</code></td>
+			<td>
+			<div id="sampleButtonArrowNext" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>button-arrow-previous</code></td>
+			<td>
+			<div id="sampleButtonArrowPrevious" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>button-arrow-up</code></td>
+			<td>
+			<div id="sampleButtonArrowUp" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>button-bevel</code></td>
+			<td>
+			<div id="sampleButtonBevel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td> </td>
+			<td> </td>
+			<td> </td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>button-focus</code></td>
+			<td>
+			<div id="sampleButtonFocus" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>caret</code></td>
+			<td>
+			<div id="sampleCaret" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>checkbox</code></td>
+			<td>
+			<div id="sampleCheckbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td>此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。</td>
+		</tr>
+		<tr>
+			<td><code>checkbox-container</code></td>
+			<td>
+			<div id="sampleCheckboxContainer" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。</td>
+		</tr>
+		<tr>
+			<td><code>checkbox-label</code></td>
+			<td>
+			<div id="sampleCheckboxLabel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>checkmenuitem</code></td>
+			<td>
+			<div id="sampleCheckmenuitem" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>dualbutton</code></td>
+			<td>
+			<div id="sampleDualButton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>groupbox</code></td>
+			<td>
+			<div id="sampleGroupbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>inner-spin-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>listbox</code></td>
+			<td>
+			<div id="sampleListBox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>listitem</code></td>
+			<td>
+			<div id="sampleListItem" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-enter-fullscreen-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-exit-fullscreen-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-mute-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-play-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-overlay-play-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-toggle-closed-captions-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-slider</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-sliderthumb</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-volume-slider-container</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-volume-slider</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-volume-sliderthumb</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-controls-background</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-controls-fullscreen-background</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-current-time-display</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>media-time-remaining-display</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menuarrow</code></td>
+			<td>
+			<div id="sampleMenuArrow" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menubar</code></td>
+			<td>
+			<div id="sampleMenubar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menucheckbox</code></td>
+			<td>
+			<div id="sampleMenuCheckbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menuimage</code></td>
+			<td>
+			<div id="sampleMenuImage" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menuitem</code></td>
+			<td>
+			<div id="sampleMenuItem" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。</td>
+		</tr>
+		<tr>
+			<td><code>menuitemtext</code></td>
+			<td>
+			<div id="sampleMenuItemText" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menulist</code></td>
+			<td>
+			<div id="sampleMenuList" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+   <td><code>menulist-button</code></td>
+   <td>
+			</td><td><code>menulist-button</code></td>
+			<td>
+			<div id="sampleMenuListButton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td>此元素将被绘制为显示一个下拉菜单可以打开的按钮。</td>
+		</tr>
+		<tr>
+			<td><code>menulist-text</code></td>
+			<td>
+			<div id="sampleMenuListText" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menulist-textfield</code></td>
+			<td>
+			<div id="sampleMenuListTextfield" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td>这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）</td>
+			<td><code>menupopup</code></td>
+			<td>
+			<div id="sampleMenuPopup" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menuradio</code></td>
+			<td>
+			<div id="sampleMenuRadio" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>menuseparator</code></td>
+			<td>
+			<div id="sampleMenuSeparator" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>meter</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>meterbar</code></td>
+			<td>
+			<div id="sampleMeterbar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>New in Fx 16.</td>
+		</tr>
+		<tr>
+			<td><code>meterchunk</code></td>
+			<td>
+			<div id="sampleMeterchunk" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>New in Fx 16</td>
+		</tr>
+		<tr>
+			<td><code>progress-bar</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>progress-bar-value</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>progressbar</code></td>
+			<td>
+			<div id="sampleProgressBar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>The element is styled like a progress bar.</td>
+		</tr>
+		<tr>
+			<td><code>progressbar-vertical</code></td>
+			<td>
+			<div id="sampleProgressBarVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>progresschunk</code></td>
+			<td>
+			<div id="sampleProgressChunk" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>progresschunk-vertical</code></td>
+			<td>
+			<div id="sampleProgressChunkVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>push-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>radio</code></td>
+			<td>
+			<div id="sampleRadio" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td>
+这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。</td>
+		</tr>
+		<tr>
+			<td><code>radio-container</code></td>
+			<td>
+			<div id="sampleRadioContainer" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td>这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。</td>
+		</tr>
+		<tr>
+			<td><code>radio-label</code></td>
+			<td>
+			<div id="sampleRadioLabel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>radiomenuitem</code></td>
+			<td>
+			<div id="sampleRadioMenuItem" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td>range</td>
+			<td>
+			<div id="sampleRange" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; }</pre>
+			range
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td>range-thumb</td>
+			<td>
+			<div id="sampleRangeThumb" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>resizer</code></td>
+			<td>
+			<div id="sampleResizer" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>resizerpanel</code></td>
+			<td>
+			<div id="sampleResizerPanel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scale-horizontal</code></td>
+			<td>
+			<div id="sampleScaleHorizontal" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scalethumbend</code></td>
+			<td>
+			<div id="sampleThumbEnd" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scalethumb-horizontal</code></td>
+			<td>
+			<div id="sampleScaleThumbHorizontal" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scalethumbstart</code></td>
+			<td>
+			<div id="sampleScaleThumbStart" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scalethumbtick</code></td>
+			<td>
+			<div id="sampleScaleThumbTick" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scalethumb-vertical</code></td>
+			<td>
+			<div id="sampleScaleThumbVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scale-vertical</code></td>
+			<td>
+			<div id="sampleScaleVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
+
+			<pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarbutton-down</code></td>
+			<td>
+			<div id="sampleScrollbarButtonDown" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarbutton-left</code></td>
+			<td>
+			<div id="sampleScrollbarButtonLeft" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarbutton-right</code></td>
+			<td>
+			<div id="sampleScrollbarButtonRight" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarbutton-up</code></td>
+			<td>
+			<div id="sampleScrollbarButtonUp" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarthumb-horizontal</code></td>
+			<td>
+			<div id="sampleScrollbarThumbHorizontal" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbarthumb-vertical</code></td>
+			<td>
+			<div id="sampleScrollbarThumbVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbartrack-horizontal</code></td>
+			<td>
+			<div id="sampleScrollbarTrackHorizontal" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>scrollbartrack-vertical</code></td>
+			<td>
+			<div id="sampleScrollbarTrackVertical" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>searchfield</code></td>
+			<td>
+			<div id="sampleSearchField" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>searchfield-cancel-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>separator</code></td>
+			<td>
+			<div id="sampleSeparator" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
+
+			<pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>sheet</code></td>
+			<td>
+			<div id="sampleSheet" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>slider-horizontal</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>slider-vertical</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>sliderthumb-horizontal</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>sliderthumb-vertical</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>spinner</code></td>
+			<td>
+			<div id="sampleSpinner" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>spinner-downbutton</code></td>
+			<td>
+			<div id="sampleSpinnerDownbutton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>spinner-textfield</code></td>
+			<td>
+			<div id="sampleSpinnerTextfield" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>spinner-upbutton</code></td>
+			<td>
+			<div id="sampleSpinnerUpbutton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>splitter</code></td>
+			<td>
+			<div id="sampleSplitter" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>square-button</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>statusbar</code></td>
+			<td>
+			<div id="sampleStatusBar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>statusbarpanel</code></td>
+			<td>
+			<div id="sampleStatusBarPanel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tab</code></td>
+			<td>
+			<div id="sampleTab" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tabpanel</code></td>
+			<td>
+			<div id="sampleTabPanel" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tabpanels</code></td>
+			<td>
+			<div id="sampleTabPanels" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tab-scroll-arrow-back</code></td>
+			<td>
+			<div id="sampleTabScrollArrowBack" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tab-scroll-arrow-forward</code></td>
+			<td>
+			<div id="sampleTabScrollArrowForward" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>textarea</code></td>
+			<td> </td>
+			<td>Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>textfield</code></td>
+			<td>
+			<div id="sampleTextField" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+			<td>Firefox Chrome</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>textfield-multiline</code></td>
+			<td>
+			<div id="sampleTextfieldMultiline" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>toolbar</code></td>
+			<td>
+			<div id="sampleToolbar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>toolbarbutton</code></td>
+			<td>
+			<div id="sampleToolbarButton" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>toolbarbutton-dropdown</code></td>
+			<td>
+			<div id="sampleToolbarButtonDropdown" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>toolbargripper</code></td>
+			<td>
+			<div id="sampleToolbarGripper" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>toolbox</code></td>
+			<td>
+			<div id="sampleToolbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>tooltip</code></td>
+			<td>
+			<div id="sampleTooltip" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeheader</code></td>
+			<td>
+			<div id="sampleTreeHeader" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeheadercell</code></td>
+			<td>
+			<div id="sampleTreeHeaderCell" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeheadersortarrow</code></td>
+			<td>
+			<div id="sampleTreeHeaderSortArrow" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeitem</code></td>
+			<td>
+			<div id="sampleTreeItem" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeline</code></td>
+			<td>
+			<div id="sampleTreeLine" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treetwisty</code></td>
+			<td>
+			<div id="sampleTreeTwisty" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treetwistyopen</code></td>
+			<td>
+			<div id="sampleTreeTwistyOpen" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>treeview</code></td>
+			<td>
+			<div id="sampleTreeView" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td>
+			<td>
+			<div id="sampleWinBorderlessGlass" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-browsertabbar-toolbox</code></td>
+			<td>
+			<div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。</td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-browsertabbar-toolbox</code></td>
+			<td>
+			<div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>此工具栏样式主要被用于浏览器的标签栏。</td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-communicationstext</code></td>
+			<td>
+			<div id="sampleWinCommunicationstext" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-communications-toolbox</code></td>
+			<td>
+			<div id="sampleWinCommunicationsToolbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 <code>-moz-win-communicationstext</code>。</td>
+		</tr>
+		<tr>
+			<td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td>
+			<td>
+			<div id="sampleWinExcludeGlass" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>此样式被用于取消元素的磨砂玻璃效果。</td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-glass</code></td>
+			<td>
+			<div id="sampleWinGlass" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-glass; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。</td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-mediatext</code></td>
+			<td>
+			<div id="sampleWinMediaText" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td> </td>
+			<td> </td>
+			<td> </td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-win-media-toolbox</code></td>
+			<td>
+			<div id="sampleWinMediaToolbox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td><strong>仅支持 Vista 及更高版本的 Windows 系统。</strong>此工具栏样式主要用于管理媒体对象。与之对应的前景色为 <code>-moz-win-mediatext</code>。</td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-box</code></td>
+			<td>
+			<div id="sampleWindowButtonBox" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-box-maximized</code></td>
+			<td>
+			<div id="sampleWindowButtonBoxMaximized" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-close</code></td>
+			<td>
+			<div id="sampleWindowButtonClose" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-maximize</code></td>
+			<td>
+			<div id="sampleWindowButtonMaximize" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-minimize</code></td>
+			<td>
+			<div id="sampleWindowButtonMinimize" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-button-restore</code></td>
+			<td>
+			<div id="sampleWindowButtonRestore" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-frame-bottom</code></td>
+			<td>
+			<div id="sampleWindowFrameBottom" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-frame-left</code></td>
+			<td>
+			<div id="sampleWindowFrameLeft" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-frame-right</code></td>
+			<td>
+			<div id="sampleWindowFrameRight" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-titlebar</code></td>
+			<td>
+			<div id="sampleWindowTitlebar" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-moz-window-titlebar-maximized</code></td>
+			<td>
+			<div id="sampleWindowTitlebarMaximized" style="display: none;">
+			<pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>
+
+			<pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+			</div>
+			{{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+			<td>Firefox</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td><code>-apple-pay-button</code></td>
+			<td> </td>
+			<td> </td>
+			<td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.properties.appearance")}}</p>
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>浏览器</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>最低支持</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>浏览器</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>最低支持</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>11.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 不完全支持。</p>
+
+<p>[2] 只有 <code>none</code>, <code>button</code>,  <code>和 textfield</code> 值被支持，详见 <a href="https://msdn.microsoft.com/en-us/library/ie/dn793580%28v=vs.85%29.aspx">the documentation on MSDN</a>。</p>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>以下代码将使一个元素在 Firefox 中看起来像工具栏按钮：</p>
+
+<pre class="brush: css">.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+</pre>
+
+<p>可参考 <a href="http://jsfiddle.net/go392m5s/">这个 JSFiddle 示例</a>，它演示了应如何使用 <code>appearance: none</code> 已对单选框与复选框应用自定义样式。</p>
+
+<h2 id="参见">参见</h2>
+<ul>
+ <li><a href="https://drafts.csswg.org/css-ui-4/#appearance-switching">Drafted in CSS Basic UI Module Level 4</a>.</li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition of <code>appearance</code> in CSS 3 Basic User Interface</a> (候选建议 2004-05-11), 过时， ( <code>appearance</code> 属性已被新规范抛弃)</li>
+ <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">将 CSS3 功能从 UI 标准中移除。</a></li>
+</ul>