技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> CSS3 appearance简介

CSS3 appearance简介

浏览:2264次  出处信息

我们来简单了解一下上文中提到的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,欲了解更多,请查阅:

我们也会不断关注这个属性在各个浏览器中的进展。

建议继续学习:

  1. CSS3入门——由点到面    (阅读:3690)
  2. CSS3 媒介判断与 iPhone 4 视网膜显示屏    (阅读:2723)
  3. 用css3写个logo    (阅读:2582)
  4. 闲谈CSS3动画    (阅读:2636)
  5. 用 CSS3 Transitions 实现动画    (阅读:2346)
  6. 理解CSS3线性渐变    (阅读:2296)
  7. CSS3开发工具收集    (阅读:2256)
  8. CSS3常用功能的写法    (阅读:2194)
  9. 揭秘HTML5和CSS3【珍珠奶茶帮】    (阅读:2107)
  10. CSS3圆角详解    (阅读:2149)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1