揭秘CSS(第 1 版)
4.9.3 显示风格
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

盒尺寸

处理溢出

框的生成

框的外观

自由缩放

轮廓样式

显示风格

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

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

a {
    width: 100px;
    height: 40px;
    -moz-appearance: button;
    -webkit-appearance: button;
}

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

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

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

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

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验