《HTML 5与CSS 3 权威指南（第4版·下册）》 —15.2.2　一个简单的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区域添加图像边框

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

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

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

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

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

这段代码的运行后结果与图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应用程序的界面设计进入一个新的台阶。