15.2　使用CSS 3能做什么

15.2.1　模块与模块化结构

在CSS 3中，并没有采用总体结构，而是采用了分工协作的模块化结构，这些模块如表15-1所示。

表15-1　CSS 3中的模块

那么，为什么需要分成这么多模块来进行管理呢？

这是为了避免产生浏览器对于某个模块支持不完全的情况。如果只有一个总体结构，这个总体结构会过于庞大，在对其支持的时候很容易造成支持不完全的情况。如果把总体结构分成几个模块，各浏览器可以选择对于哪个模块进行支持、对哪个模块不进行支持，支持的时候也可以集中把某一个模块全部支持完了再支持另一个模块，以减少支持不完全的可能性。

例如，台式计算机、笔记本和手机上用的浏览器应该针对不同的模块进行支持。如果采用模块分工协作的话，不仅是台式计算机，各种设备上所用的浏览器都可以选用不同模块进行支持。

15.2.2　一个简单的CSS 3示例

现在，我们已经对CSS 3的模块和模块化结构有了一个初步的认识，那么，究竟我们能够用CSS 3来做些什么呢？

这里，我们通过一个示例来将CSS 2与CSS 3做一个对比，借此使大家对CSS 3有一个初步的印象。

在这个示例中，我们给页面上的某个div区域添加一个彩色图像边框，这样可以使这个区域看上去漂亮很多，生动很多。

在CSS 2中，当然可以实现这个效果，如代码清单15-1所示。

代码清单15-1　使用CSS 2给div区域添加图像边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
margin:3px;
width:450px;
height:104px;
padding-left:14px;
padding-top:20px;
background:url(test.png);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="image-boarder">
 ·示例文字1<br/>
 ·示例文字2<br/>
 ·示例文字3<br/>
 ·示例文字4<br/>
</div>
</body>
</html>

这段代码在Firefox浏览器中的运行结果如图15-1所示。

接下来，我们看一下在CSS 3中如何实现这个功能。

在CSS 3中，添加了很多新的样式，譬如可以创建圆角边框，可以在边框中使用图像，可以修改背景图像的大小，可以对背景指定多个图像文件，可以修改颜色的透明度，可以给文字添加阴影，可以在CSS中重新指定表单的尺寸等。

在代码清单15-2中，我们使用CSS 3来实现与代码清单15-1相同的功能。具体操作的时候，只要给页面中的div元素增加一个border-image属性，然后在该属性中指定图像文件与边框宽度就可以了。

代码清单15-2　使用CSS 3给div区域添加图像边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
width:450px;
padding-top:20px;
padding-left:14px;
border-image:url(test.png) 30 30 30 30 130px;           // 指定边框图像
}
</style>
</head>
<body>
<div id="image-boarder">
 ·示例文字1<br/>
 ·示例文字2<br/>
 ·示例文字3<br/>
 ·示例文字4<br/>
</div>
</body>
</html>

这段代码的运行后结果与图15-1所示结果相同。

虽然目前看来两种方法都达到了同样的效果，只是实现方法不同而已。但是如果再在div中增加一行文字，我们看一下使用CSS 2中的样式表后会是什么情况，如图15-2所示。

图15-1　使用CSS 2样式添加图像边框

图15-2　使用CSS 2样式表，当文字超过图像高度时的页面外观

同样，来看一下使用CSS 3中的样式表后会是什么情况，如图15-3所示。

为什么在CSS 3中文字没有超出边框图像之外？这是因为在CSS 3样式表中，在指定边框图像的同时，也指定了图像允许拉伸来自动适应div区域的高度，而不是采取CSS 2中将div区域高度设为边框图像高度的方式。那么，也许有人会问，如果在CSS 2的div元素的样式代码中不指定div区域的高度是否可以呢？这样的话就会出现如图15-4所示的情况。

图15-3　使用CSS 3样式表，当文字超过图像高度时的页面外观

图15-4　在CSS 2的样式代码中不指定div区域高度的效果

从图中可以看出，当只有一行文字的时候，该边框图像又不能完全显示了。因此，当div区域中的文字高度处于不断变化的状态时，使用CSS 2样式表添加边框图像的操作相对来说就比较麻烦。在CSS 3中考虑到了这种情况，添加了允许边框图像自动拉伸的属性，从而解决了这个问题。

关于如何使用border-image这个属性，我们将在后面进行详细介绍。在这里，我们通过这个示例，向大家表明了目前在CSS 2中一些比较难以处理的情况，在CSS 3中通过使用新增属性很容易就能够解决。

这对界面设计来说，无疑是一件非常可喜的事情。在界面设计中，最重要的就是创造性，如果能够使用CSS 3中新增的各种各样的属性，就能够在页面中增加许多CSS 2中没有办法解决的样式，摆脱现在界面设计中存在的许多束缚，从而使整个网站或Web应用程序的界面设计进入一个新的台阶。

上一章目录下一章