CSS 显示风格 appearance属性

　

appearance

在CSS3中，可以通过 APPearance属性使元素呈现为标准的用户界面元素，如按钮、菜单、文本输入框、单选按钮、多选按钮、列表等等。

也就是说，使用 appearance属性，可以改变任何元素的默认风格，但所有主流浏览器都不支持它。到现在为止，只得到 Webkit 和 Gecko 两个内核的支持，但需要加上浏览器的私有前缀。如，让链接元素默认显示为按钮风格：

1. a {
2.     width: 100px;
3.     height: 40px;
4.     -moz-appearance: button;
5.     -webkit-appearance: button;
6. }

由于 appearance属性还没有成为标准，在渲染时，仍然是各浏览器各自为政，还无法达到统一的标准。因此，在Chrome和Firefox浏览器中会得到不同的渲染效果。

在Chrome浏览器中的运行结果如图 4‑73 所示：

图4-73 appearance属性在Chrome中效果

在Firefox浏览器中的运行结果如图 4‑74 所示：

图4-74 appearance属性在Firefox中效果

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、javaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

相关阅读

css-简单滑动门

效果 鼠标滑过的时候，只在左边的时候左边处于半充满状态，在中间的时候处于全充满                            

详解android:scaleType属性

Android:scaleType是控制图片如何resized/moved来匹对ImageView的size。ImageView.ScaleType / android:scaleType值的意义区别：CE

纯css实现各种箭头图片效果

我们经常会通过使用css来实现某些图片的来达到不使用真正意义上的图片的效果，今天就尝试着使用纯css来实现几个常见的箭头效果 下

HTML中元素的position属性详解

HTML中DOM元素有5种定位属性值：static、relative、absolute、fixed和inherit。下面分别对这5个属性进行说明。position: static;

CSS background-repeat属性

城市现在为了评选文明城市，都开始注重城市的市容市貌多种树、多修路，尤其是人行甬道都开始铺设清洁的瓷砖、大理石等一些装饰性设施