介绍
本节介绍如何使用CSS3的样式进行图像边框的绘制。
在CSS3之前，如果要使用图像边框，若元素的长或宽是随时可变的，页面制作通常采用的做法是让元素的每条边单独使用一幅图像文件。
但是，这种做法也有缺点：
- 一方面是比较麻烦；
- 另一方面是页面上使用的元素也就变得比较多了。
border-image属性
针对上面情况，CSS3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。
使用border-image属性，会让浏览器在显示图像边框时，自动将所使用到的图像分割为9部分进行处理，这样就不需要页面制作者再另外进行人工处理了。另外，页面中也不需要因此而使用较多的元素了。关于浏览器对于边框所用到的图像的自动分割内容，会在下面内容进行详细介绍。
使用border-image属性的时候，如果使用的是Firefox浏览器，需要在样式代码中将其书写成"-moz-border-image"的形式；如果使用的是Safari浏览器或Chrome浏览器，需要书写成"-webkit-border-image"的形式；如果使用的是Opera浏览器，需要写成"border-image"的形式。
看下border-image属性使用示例，该示例中有一个div元素，使用border-image属性为该div元素添加了一个图像边框。
.wrap {
border-image:url(img/border.png) 20 20 20 20 / 20px;
-webkit-border-image:url(img/border.png) 20 20 20 20 / 20px;
-moz-border-image:url(img/border.png) 20 20 20 20 / 20px;
width:200px;
}border-image属性最简单的使用方法
border-image属性最简单的使用方法如下所示。
border-image:url(图像文件的路径) A B C D
-webkit-border-image：url(图像文件的路径) A B C D
-moz-border-image：url(图像文件的路径) A B C D
border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。如下图1图示的方法对这四个参数进行了说明。
接下来，让我们看一下如果在border-image属性值中指定了这四个参数，浏览器对于边框所使用的图像是如何进行分割的。
首先，当在样式代码中书写如下所示的代码时，浏览器对于边框所使用的图像分割方法如图2所示。
border-image：url(borderimage_1.png) 18 18 18 18
-webkit-border-image:url(borderimage_1.png) 18 18 18 18
border-image:url(borderimage_1.png) 18 18 18 18如图中所示，图像被自动分割为9部分。分割后的图像在CSS3中的名称如表所示
border-top-left-image / border-top-image / border-top-right
border-left-image / / border-right-image
border-bottom-left-image / border-bottom-image / border-bottom-right-image下面示例代码，可以看出浏览器是如何将分割图像显示在一个边框宽度为5px的div元素中。
.wrap{
border:solid 5px;
border-image:url(img/border.png) 18 18 18 18;
-webkit-border-image:url(img/border.png) 18 18 18 18;
-moz-border-image:url(img/border.png) 18 18 18 18;
width:300px;
}使用border-image属性来指定边框宽度
在CSS3中，除了可以使用border或border-width属性指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，方法如下：
border-image: url('图像文件路径') A B C D/border-width
样式代码如下：
.wrap { border:solid; border-image:url(img/border.png) 18 18 18 18/18px ; -webkit-border-image:url(img/border.png) 18 18 18 18/18px; -moz-border-image:url(img/border.png) 18 18 18 18/18px; width:300px; }另外，在上述代码中A、B、C和D四个参数只指定了一个参数18px，这是因为CSS3中，如果此处的四个参数完全相同，可以只写一个参数，将其他三个参数省略。
border-image:url(img/border.png) 18/5px 10px 15px 20px ;
中央图像自动拉伸
浏览器将边框所用图像自动分割为9部分后，除了将border-top-image、border-left-image、border-right-image、border-bottom-image这4部分自动分配为四条边所用的图像之外，将位于中间部分的图像分配给元素边框包围的中间区域，随着div元素的内容变化的同时，或者在样式代码中修改div元素的宽度或高度的同时，中间部分的图像也会自动进行伸缩，以填满该中间区域。
样式代码如下：
.wrap {
border: solid;
border-image:url(img/border.png) 18/5px;
-webkit-border-image:url(img/border.png) 18/5px ;
-moz-border-image:url(img/border.png) 18/5px ;
width:300px;
}绘制四个角不同半径的圆角边框
可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示。
border-image: url(文件路径) A B C D/border-width topbottom leftright其中,topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。
repeat
将显示方法指定为repeat时，图像将以平铺的方式进行显示。示例代码：
.wrap { border-image:url(img/border.png) 18/5px repeat repeat; -webkit-border-image:url(img/border.png) 18/5px repeat repeat; -moz-border-image:url(img/border.png) 18/5px repeat repeat; }
stretch将显示方法指定为stretch时，图像将以拉伸的方式进行显示。
repeat+stretch将显示方法指定为repeat+stretch时，图像将以平铺方式和拉伸方式结合使用。示例如下：
.wrap { border-image:url(img/border.png) 18/5px repeat stretch; -webkit-border-image:url(img/border.png) 18/5px repeat stretch; -moz-border-image:url(img/border.png) 18/5px repeat stretch; }
round使用背景图像
在使用border-image属性的时候，仍然可以正常使用背景图像，但是为了不让边框图像挡住背景图像，需要使用中间为透明的边框图像，否则背景图像就有可能被边框图像的中央部分挡住部分或全体了。
.wrap {
-moz-border-image: url(img/border-image-small-1.png") 22 round;
-webkit-border-image: url("img/border-image-small-1.png") 22 round;
-o-border-image: url("img/border-image-small-1.png") 22 round;
border-image: url("img/border-image-small-1.png") 22 round;
display: inline-block;
border-width: 22px;
}