离我们越来越近了。尽管,很多人指出CSS3这样那样的缺陷,如标准还没有最后完善、浏览器的支持也不够全面。但是,有哪次变革毋须阵痛呢?技术的革新是大势所趋,早点熟悉它绝对没有坏处^_^
本文中,笔者带各位熟悉一下CSS3的一些新特性;并给出目前主流浏览器对它的支持情况。算是CSS3的快速入门了。
很多博客文章中都会谈到CSS3的一些缺点还不够完美(尤其是浏览器的兼容性),这让很多网页设计者们对它敬而远之。不要以这个借口就不使用CSS3,没有它,我们还停留在CSS2.1阶段呢。
其实目前大部分浏览器都是全面或部分支持CSS3的(IE9.0除外)。尤其对于日趋壮大的手机、平板电脑用户来说。由于其内嵌的浏览器多不是IE内核的^_^。
基于这个原因,笔者会在下面的每个示例中明确地给出该项css3属性浏览器的兼容性,以供各位设计时参考。
这个属性其实最初是为网页测试设计的。但在实际的应用中,利用第三方前缀来为不同浏览器设置同一属性也屡见不鲜。
这个恐怕是使用最多的CSS3属性了。在此之前如果要为div标签或按钮添加圆角那可要大费周折地做一堆类和图片来实现。到了CSS3只要一句语法就能搞定:
和其他CSS属性一样,可以定义一条总的规则;也可以为每个角定义不同角度。如何使用第三方前缀,用法略有区别:
最后一个选项指定透明度。另外,边框的颜色和阴影也支持这种带透明度选项的颜色设定。如果希望和老的浏览器兼容,那么就要额外定义一个。
其实,CSS文字阴影早在CSS2.0的标准制定中就被提了出来。可惜到3.0版本才得以实现。遗憾的是,目前IE 9系列仍然不支持这个属性。
CSS盒子的概念各位如果不清楚的请搜索之。盒子阴影和文字阴影略有不同,一个是基于div之类的块元素,另一个则是针对文字。
它的定义方法和文字阴影差不多。之前只有在PS中才有的内阴影、外阴影如今只需一句css定义了。
可以为一个div定义多个背景图片。而在此之前,我们实现的方法是使用多个div,并为每个div定义一个背景图片。
需要注意的是,如果要保持对旧浏览器的兼容,则需要额外再定义一个background以作备用。
在CSS2中边框只能是一成不变的一条直线,要么是实线,要么是虚线。如此乏味的设计当然不能满足网页设计的需要。应运而生了许多边框设计方案。
将了不少,其实CSS3的新特性远不止这么多。笔者也不能一个个全都说一遍^_^。挑几个常用的属性为各位详细叙述下。
Media Queries可以针对不同设备的一些Media属性设定不同的CSS属性或者是不同的CSS文件调用。
可以看到在不同的宽度设置下,呈现不同的布局。这对于正如日中天的移动平台应用无疑有着巨大的影响力。
这片东拼西凑的东西终于写完了,笔者深感欣慰。上班时间快到了,css快速入门到此结束。笔者自己其实也是学员之一。希望这篇文章能对你有点小小的作用^_^。

