border-image，边框图片效果详解

border-image             设置边框图片的效果
border-image-source          //引入背景图片地址
border-image-slice           //切割引入的背景图片，只需要写数值，不需要带单位
border-image-width           //边框背景图片的宽度
//如果你设置了边框的宽度border-width，图像会偏移；
//但是设置边框背景图片的宽度，图像就不会偏移。
border-image-repeat          //边框背景图片的排列方式
border-image-outset          //边框背景向外扩张

border-image-slice最多可以设四个值，对应的是裁取border-image-source所引入图片的
四个角的大小。
eg.div{
        border-image-source:url(……);
    border-image-width:27px;
    border-image-slice:27;
}
上面这个示例中，border-image-slice：27；只会显示图片在边框位置的，图片在元素部分
是被镂空的，不显示。若你想显示图片在元素区域的内容，在在后面设置fill。

border-image-slice：0 fill；

注意：一、在当前谷歌 55.0.2883.87 m 版本中，border-image-slice属性默认是带有fill关键字的。

二、在谷歌浏览器中，border-image各子属性不能分开写，必须在一起写，且前面加上-webkit-前缀。

上面的实例中，边框图片是在border里面的，你可以设置一下border-image-outset，从而使
边框图片显示在边框位置。
若边框图片为九宫格格式，那么你可以设置border-image-width、border-image-slice、
border-image-outset为数值大小相同的值。
eg.div{
        border-image-source:url();
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:27px;
}

border-image-repeat    显示九宫格四个边的显示排列方式，有如下四个值：
1、stretch    指定以拉伸方式填充边框背景图，默认值
2、repeat     指定以平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
3、round      指定以平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的
大小，直至正好可以铺满整个边框。（常用）
4、space      指定以平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片之
间的间距，直至正好可以铺满整个边框。（浏览器暂不支持）

边框图片，除了使用九宫格以外，还可以使用非九宫格的图片，比如一个按钮图片，同样是
border-image-source将图片引进来，然后设置border-image-width，并用border-image-slice
截取合适的图片边角。

我们可以使用border-image的简写形式，各属性书写顺序如下所示：
border-image：(border-image-source) (border-image-slice/border-image-width/
border-image-outset) (border-image-repeat)

eg.div{
        border-image:url() 27/27px/27px round;
}