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单位的，
谨记！但是可以是百分比
在W3C中border-image是一个复合样式，包括如下的几个部分：border-image-source 指定border的背景图的urlborder-image-slice 设置图片如何切割的属性，也就是九宫格的那四刀border-image-width 定义border-image的显示区域的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属性呢
这个东西确实不太好理解！
用一张很具有代表意义的图片来做一个例子：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;
}
可以很明显的看到除了四个角和中间部分没有变形之外，四条边都被拉伸了。原因是默认情况下border-image-repeat为stretch拉伸状态。
也就是用四刀切成了九个部分（技术上称为九分法缩放，有助于避免在调整圆角框大小时出现的是真的情况），其中四个角的部分是不会拉伸和重复的，总是保持原样,水平的边进行水平变换，垂直的边进行垂直方向的变换，中间的区域既要进行进行水平变换又要进行垂直变换。都是stretch的情况已经说明了，下面我们对border-image-repeat进行修改看看都是什么效果。
（1）-webkit-border-image:url("border.png") 27 stretch round;
这里还是看不出来repeat和round之间有什么区别，总结一下就是：平铺可能会改变图片的大小，而重复不会改变图片的大小。像上面一样我们有时候是看不到差别的，但有时候这种差别又是确实存在的
P.S. 需要说明的是border-image适用于所有元素（行内元素和块级元素），但是不适用于设置了border-collapse的table-cells
(2012-05-08 08:16:01)
