From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/appearance/index.html | 1858 +++++++++++++++++++++++++++++ 1 file changed, 1858 insertions(+) create mode 100644 files/zh-cn/web/css/appearance/index.html (limited to 'files/zh-cn/web/css/appearance/index.html') 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 +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

在基于 Gecko 的浏览器（如 Firefox）中，-moz-appearance CSS 属性被用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。

+ +

在基于 WebKit 的浏览器（如 Safari）和基于 Blink 的浏览器（如 Chrome, Opera）中，-webkit-appearance 属性被用于达到相同 to achieve the same thing. Note that Edge also supports -webkit-appearance (instead of -ms-appearance) for compatibility reasons.

+ +
/* 在 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;
+
+ +

这个属性经常用在 XUL 的样式表中，用来设计拥有平台原生UI样式的自定义的组件，也用于 XBL 之中以实现 Mozilla 平台的组件。

+ +
+

兼容性提示：如果您想在网站上使用此属性，您应非常小心地测试它。尽管在大部分现代浏览器中它是被支持的，它的实现差别很大。在版本较旧的浏览器中，即使是 none 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。

+
+ +

{{cssinfo}}

+ +

语法

+ +

The -moz-appearance 属性may be specified as a single value chosen from the list below.

+ +

取值

+ +

<appearance> 是其中的一个关键字:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoBrowserDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}All不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome此元素将被作为按钮来绘制。
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}Firefox
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}Firefox
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}Firefox
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}Firefox
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}Firefox
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}Firefox
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}Firefox
inner-spin-button Chrome
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome
media-enter-fullscreen-button Chrome
media-exit-fullscreen-button Chrome
media-mute-button Chrome
media-play-button Chrome
media-overlay-play-button Chrome
media-toggle-closed-captions-button Chrome
media-slider Chrome
media-sliderthumb Chrome
media-volume-slider-container Chrome
media-volume-slider Chrome
media-volume-sliderthumb Chrome
media-controls-background Chrome
media-controls-fullscreen-background Chrome
media-current-time-display Chrome
media-time-remaining-display Chrome
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}Firefox
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}Firefox
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}Firefox
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}Firefox
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}Firefox此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}Firefox
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome
menulist-button + menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome此元素将被绘制为显示一个下拉菜单可以打开的按钮。
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}Firefox
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}Firefox
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}Firefox
meter Chrome
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxNew in Fx 16.
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxNew in Fx 16
progress-bar Chrome
progress-bar-value Chrome
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}FirefoxThe element is styled like a progress bar.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}Firefox
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}Firefox
push-button Chrome
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome +这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}Firefox
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}Firefox
range + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}Firefox
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}Firefox
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome
searchfield-cancel-button Chrome
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}Firefox
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}Firefox
slider-horizontal Chrome
slider-vertical Chrome
sliderthumb-horizontal Chrome
sliderthumb-vertical Chrome
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}Firefox
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}Firefox
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}Firefox
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}Firefox
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}Firefox
square-button Chrome
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}Firefox
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}Firefox
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}Firefox
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}Firefox
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}Firefox
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}Firefox
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}Firefox
textarea Chrome
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}Firefox
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}Firefox
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}Firefox
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}Firefox
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}Firefox
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}Firefox
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}Firefox
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}Firefox
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}Firefox
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}Firefox
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}Firefox
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}Firefox
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}Firefox
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}Firefox
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxWindows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}Firefox
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 -moz-win-communicationstext。
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}Firefox
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 -moz-win-mediatext。
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}Firefox
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}Firefox
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}Firefox
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}Firefox
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}Firefox
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}Firefox
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}Firefox
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}Firefox
-apple-pay-button iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.appearance")}}

+

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
浏览器ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
最低支持1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
浏览器AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
最低支持{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] 不完全支持。

+ +

[2] 只有 none, button,  和 textfield 值被支持，详见 the documentation on MSDN。

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

以下代码将使一个元素在 Firefox 中看起来像工具栏按钮：

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

可参考 这个 JSFiddle 示例，它演示了应如何使用 appearance: none 已对单选框与复选框应用自定义样式。

+ +

参见

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