CSS3中的border-image是非常有用的，但是有点不太好理解，因为 border-image的实际功能是它的字面意思有点不太统一。从字面上来看border-image只是针对边框有效，但是在实际运用中非边框区域也 可以进行添加。我以前也一直纠结在它的字面意思上而很不理解。border-image在使用的时候既然是针对border的那么在使用border-image之前必须设border-width，也就是必须设置边框的宽度才能真正实现border-image的效果

【语法】 border-image: url top right bottom left x-repeat y-repeat

【参数】url      采用的图片的路径

              top,right,bottom,left就是图片的切割方法，对应下面的九宫格，但是简单来说可以对应设定的border-width来确

【说明】对于top right bottom left不要加单位，虽然标准上面说默认单位是px像素，但是实际使用时是不可以加px单位的，

border-image-repeat      表示图片的变换样式，包括三个值 stretch拉伸 repeat重复  round平铺

但是可惜，目前各个浏览器对标准的支持都不好，还没有浏览器能够支持这些分解样式呢。

虽然css3提出了border-image的属性，但是在各个主流的浏览器中的实现方式都是不一样的，这就需要用到各种浏览

 器的前缀了

          -webkit-border-image        适用于webkit内核的浏览器  safari  google

          -khtml-border-image         适用于webkit内核的浏览器  safari  google（-khtml是webkit的前身）

          -moz-border-image          适用于mozilla浏览器 firefox

          -o-border-image               opera浏览器不支持

          -ms-border-image            虽然-ms-border-image是IE9的私有属性，但是很可惜的是IE9现在还不支持

P.S. 需要说明的是虽然现在还没有浏览器支持不加前缀的border-image属性，但是为了使得未来在维护量方面

                 减小一点，记得在最后加上这么一句    border-image：.......;  说不定哪一天，各个浏览器都支持了

                 border-image属性呢

这个东西确实不太好理解！

http://s11/middle/7d23d89btbf7c44fa84fa&690

用一张很具有代表意义的图片来做一个例子：borer.png，图中每一个菱形宽为27px

现在有一个div       <div class="testAli"></div>，我们要给他添加相应边框图片，样式如下：(-webkit下为例子)

.testAli{

       border-width:27px;

       -webkit-border-image:url("border.png") 27 ;

       width:100px;height:100px;background:#fff;

}

     http://s3/middle/7d23d89btbf7c49ea01c2&690

可以很明显的看到除了四个角和中间部分没有变形之外，四条边都被拉伸了。原因是默认情况下border-image-repeat为stretch拉伸状态。

http://s15/middle/7d23d89btbf7c4f7717ee&690

也就是用四刀切成了九个部分（技术上称为九分法缩放，有助于避免在调整圆角框大小时出现的是真的情况），其中四个角的部分是不会拉伸和重复的，总是保持原样,水平的边进行水平变换，垂直的边进行垂直方向的变换，中间的区域既要进行进行水平变换又要进行垂直变换。都是stretch的情况已经说明了，下面我们对border-image-repeat进行修改看看都是什么效果。

（1）-webkit-border-image:url("border.png") 27 stretch round;

http://s1/middle/7d23d89btbf7c531abdd0&690

这里还是看不出来repeat和round之间有什么区别，总结一下就是：平铺可能会改变图片的大小，而重复不会改变图片的大小。像上面一样我们有时候是看不到差别的，但有时候这种差别又是确实存在的

P.S. 需要说明的是border-image适用于所有元素（行内元素和块级元素），但是不适用于设置了border-collapse的table-cells