2.4 CSS 3的新特征
视频讲解：光盘\TM\lx\2\04 CSS 3的新特征．mp4
HTML 5和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）
关键代码如下：
<title>使用CSS2对页面中的文字添加彩色边框</title>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
border-color:blue;
border-style:solid;
height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
在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）
关键代码如下：
<style>
#boarder {
border:solid 5px blue;
border-radius:20px;
-moz-border-radius:20px;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
说明
在使用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和图2.25中的运行结果不难看出CSS 2与CSS 3的区别，对于界面设计者来说，这无疑是个好消息。在CSS 3中新增的各种各样的属性，可以摆脱CSS 2中存在的很多束缚，从而使整个网站的界面设计迈上一个新的台阶。
图2.24 CSS 2中文字超过边框高度
图2.25 CSS 3中边框自动延长