18.2.2 一个简单的CSS 3示例（1）
现在，我们已经对CSS 3的模块和模块化结构有了一个初步的认识，那么，究竟我们能够用CSS 3来做些什么呢？
这里，我们通过一个示例，来将CSS 2与CSS 3做一个对比，借此对CSS 3有一个初步的印象。
在这个示例中，我们给页面上的某个div区域添加一个彩色图像边框，这样可以使这个区域看上去漂亮很多，生动很多。
在CSS 2中，当然可以实现这个效果，如代码清单18-1所示。
代码清单18-1 使用CSS 2给div区域添加图像边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<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浏览器中的运行结果如图18-1所示。
图18-1 使用CSS 2样式添加图像边框
接下来，我们看一下在CSS 3中如何实现这个功能。
在CSS 3中，添加了很多新的样式，譬如可以创建圆角边框，可以在边框中使用图像，可以修改背景图像的大小，可以对背景指定多个图像文件，可以修改颜色的透明度，可以给文字添加阴影，可以在CSS中重新指定表单的尺寸等。
在代码清单18-2中，我们使用CSS 3来实现与代码清单18-1相同的功能。具体操作的时候，只要给页面中的div元素增加一个border-image属性，然后在该属性中指定图像文件、边框宽度与图像拉伸方式就可以了。
代码清单18-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;
-moz-border-image:url（test.png） 3 stretch stretch; //指定边框图像
}
</style>
</head>
<body>
<div id="image-boarder">
示例文字1<br/>
示例文字2<br/>
示例文字3<br/>
示例文字4<br/>
</div>
</body>
</html>
相关HTML 5与CSS 3权威指南：一个简单的CSS 3示例（1）