CSS3 appearance简介
浏览:2179次 出处信息
我们来简单了解一下上文中提到的css appearance。在之前研究HTML5表单的时候,一直很好奇浏览器是通过什么渲染不同的表单界面的,后来在Chrome中查看类型为range的input的时候,发现了这个有趣的属性:
然后右边的样式显示是这样的:
后来就发现CSS3规范中对appearance有定义,MDC也有对这个属性的描述。
这真是个非常有趣的属性,可以用来伪装或是实现一些特殊的界面,比如将input[type=text]的appearance设置为button后,它看起来就像是一个按钮了:
样式如下:
1 2 3 4 |
input[type=text]{ -moz-appearance:button; -webkit-appearance:button; appearance:button;} |
不过现在只有webkit和firefox通过私有属性支持,各大浏览器还都没有完全正式的支持,而且它们支持的appearance属性值也不完全相同。不过既然W3C将其列入规范中,相信不久的将来,各大浏览器都会对这个属性实现一些基本的支持的吧,这样我们就能更好的控制页面中元素的表现了。
David Walsh不久前也简单的讲述了这个属性,只是只针对webkit,他还做了个demo页面。
关于CSS3 appearance,欲了解更多,请查阅:
我们也会不断关注这个属性在各个浏览器中的进展。
建议继续学习:
- CSS3入门——由点到面 (阅读:3603)
- CSS3 媒介判断与 iPhone 4 视网膜显示屏 (阅读:2587)
- 用css3写个logo (阅读:2510)
- 闲谈CSS3动画 (阅读:2491)
- 用 CSS3 Transitions 实现动画 (阅读:2265)
- CSS3开发工具收集 (阅读:2197)
- 理解CSS3线性渐变 (阅读:2198)
- CSS3常用功能的写法 (阅读:2109)
- 揭秘HTML5和CSS3【珍珠奶茶帮】 (阅读:2028)
- CSS3圆角详解 (阅读:2002)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:li水平居中css实现
后一篇:多栏自适应布局问题浅谈 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: appearance CSS3
- 发布时间:2010-08-08 23:54:44
建议继续学习
近3天十大热文
- [11] 解决 ubuntu 的 /etc/hosts
- [9] 文言文白话文互转:文言文转白话文(现代文),
- [7] Http/2知识图谱
- [7] 海量数据面试题举例
- [7] 领导需要比下属更懂技术吗?
- [6] 查看 Apache并发请求数及其TCP连接状
- [6] 聚类算法之ISODATA
- [6] 近场通信 vs. 低功耗蓝牙:如何抉择
- [6] 说说lighttpd的fastcgi
- [6] 一个 VLA (可变长度数组)的实现