这个的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的很强大的，因为它可以漂亮的边框，而不在是单调的线条。

CSS 允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

通过 border-image 可以给元素得而边框样式，而不单单是系统提供的那几种。换句话说就是我们可以来充当元素的边框对它进行环绕。

border-image:source slice repeat;

包含

.demo{
    width: px;
    height: px;
    background: #ccc;
    border-width: px;
    border-style: solid;
    border-image: url(./../img/border-image.jpg);
}

图

我们这使用的是 bordr-image 这个，并定义了路径 其它的不设定使用认值。

.demo2{
    width: px;
    height: px;
    background: #ccc;
    border-width: px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
}

图

我们可以看到 例1 和 例2 两个图是一样的，因为我们仅仅使用了 border-image-source 了路径而已。

.demo2{
    width: px;
    height: px;
    background: #ccc;
    border-width: px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice: ;
}

图

通过给 slice 设定 70 我们得到了漂亮的边框，下面重点说下这个值是如何作用在边框上的。
4. 继续在 demo2的基础上 border-image-outset 。

.demo2{  
    width: px;
    height: px;
    background: #ccc;
    border-width: px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice:;
    border-image-outset:px;
}

图

从图中的红色箭头我们可以看到，边框和灰色元素之间有一条 2px 的白线，这是因为我设置了 image-outset 向外偏移 了 22px 的原因。

.demo2{              
    width: px;
    height: px;
    background: #ccc;
    border-width: px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice:;
    border-image-outset:px;
    border-image-repeat: repeat;
}

图

.demo{
    border-width:px;
    border-image-slice:;
}

还有一点要注意的是 slice 不需要挂单位。
2. 如果想填充中心可以-webkit-border-image就像下面这样

.demo{
    -webkit-border-image: url(./../img/border-image.jpg)    stretch;
}

这是 border-imgae 的连写方式，第和第二个 20 都是 slice，认出它的最后就是 它们都不带单位。