2.4 CSS 3的新特征
从2010年开始，HTML5和CSS 3就一直是互联网技术中最受关注的两个话题。CSS 3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界的巨头联合组成的一个名为CSS Working Group的组织共同协商策划的。虽然目前很多细节还在讨论中，但还是不断地向前发展着。
2.4.1 模块与模块化结构
在CSS 3中，并没有采用总体结构，而是采用了分工协作的模块化结构。采用这种模块化结构，是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块，各浏览器可以选择支持哪个模块，不支持哪个模块。例如，普通电脑中的浏览器和手机上用的浏览器应该针对不同的模块进行支持。如果采用模块分工协作，不同设备上所用的浏览器都可以选用不同模块进行支持，方便了程序的开发。CSS 3中的常用模块如表2.7所示。
表2.7 CSS 3中的模块
2.4.2 一个简单的CSS 3实例
对CSS 3中模块的概念有了一定的了解之后，本节通过实例为大家介绍CSS 3与CSS 2在页面设计中的区别。
在CSS 2中如果要对页面中的文字添加彩色边框，可以通过DIV层来进行控制。
【例2.20】 在CSS 2中使用DIV层对页面中的文字添加彩色边框。（实例位置：资源包\TM\sl\2\13）
在Firefox浏览器中运行该实例，结果如图2.22所示。
图2.22 使用CSS 2对页面中的文字添加边框
在CSS 3中添加了一些新的样式，例如本实例中的边框，就可以通过CSS 3中的border-radius属性来实现。border-radius属性指定好圆角的半径，即可绘制圆角边框。
【例2.21】 在CSS 3中使用border-radius属性对页面中的文字添加边框。（实例位置：资源包\TM\sl\2\14）
说明
在使用border-radius属性时，如果使用Firefox浏览器，需要将样式代码书写成“-moz-border-radius”；如果使用Safari浏览器，需要将样式代码书写成“-webkit-border-radius”；如果使用Opera浏览器，需要将样式代码书写成“border-radius”；如果使用Chrome浏览器，需要将样式代码书写成“border-radius”或“-webkit-border-radius”的形式。
在Firefox浏览器中运行该实例，结果如图2.23所示。
图2.23 使用CSS 3对页面中的文字添加边框
在上面的两个实例中，都是对页面中的文字添加了边框，但是如果在这两个实例中多添加几行文字，即可发现运行结果的变化，如图2.24和图2.25所示。
图2.24 CSS 2中文字超过边框高度
图2.25 CSS 3中边框自动延长
从图2.24和图2.25中的运行结果不难看出CSS 2与CSS 3的区别，对于界面设计者来说，这无疑是个好消息。在CSS 3中新增的各种各样的属性，可以摆脱CSS 2中存在的很多束缚，从而使整个网站的界面设计进入一个新的台阶。