border-image-source:url(border.png);
border-image-outset:27px 27px 27px 27px; //边框图片向设置为27px，那么背景图将会从盒子最外边界向外上右下左各延伸27px。
}
border-image-outset延伸之前和延伸之后
边框图片重复border-image-repeat
我叫border-image-repeat，顾名思义，我的作用就让边框背景是否重复，默认值为stretch，是拉伸的意思，4个角4个区域分别做水平和垂直方向的拉伸，来填补边框的间隙；repeat是就是让4个角4个区域做完水平和垂直方向的复制图像，做CTRL+V运动，把边框之间的空隙填满；而round[环绕]是把4个角和4个区域分成均等区域，然后用背景图片切好能铺满整个边框空隙，不能多也不能少，正好合适。听说下面有demo↓：
复制代码
.border-image-stretch{
border:27px solid #000;
border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:stretch;
}/*拉伸*/
.border-image-repeat{
border:27px solid #000;
border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:repeat;
}/*重复*/
.border-image-round{
border:27px solid #000;
border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
border-image-slice:27 27 27 27;
border-image-repeat:round;
}/*环绕*/
效果如下：
应用
对于应用来说，这个边框图片太强大了的，随便一折腾就可以弄出奇形怪状的边框来，使得边框不在拘泥于那些传统的线框。不管你是调slice值，还是repeat值、或者是outset值都可以变化很多新花招，刚刚我们其实在做demo展示的时候已经展现出来，那么下面我就用来一个一张图片构造最简单的我们的圆弧长方形。
用到图片：
效果如下：
复制代码
border-image-repeat
更多详细demo，请点击： 仅仅是图片宽度改变demo展示
结语
好了，就这么多了，这个属性目前对于IE来说真是渣渣，但是手机端上的兼容性还是非常友好的，假如你不想用老旧的线来构造一个边框的话，那么就换一张图片来构造丰富的边框样式吧，你会发现，css3的世界真是非常强大的。
