HTML 5与CSS 3权威指南：一个简单的CSS 3示例（2）

18.2.2   一个简单的CSS 3示例（2）

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

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

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

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

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

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

图18-4 在CSS 2的样式代码中部指定DIV区域高度的效果

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

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

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