border-image属性深入剖析

border-image简写:

border-image: source slice width outset repeat

不简写，单独设置属性，属性如下:

属性	属性值	作用
border-image-source	url(‘xx.jpg’)	指定边框图片的资源来源，通俗的说就是使用的图片存放的位置
border-image-slice	xx数字(相应的border-width倍数)/ xxpx/ xx%/ fill(保留图片中心部分)	图片边界向内偏移多少，通俗说就是图片制作边框时怎么划分
border-image-width	xx数字(相应的border-width倍数)/ xx%/ xxpx	图像边界的宽度
border-image-outset	xx数字(相应的border-width倍数)/ xxpx	边框外部绘制图像的量,通俗来说就是图片超过边框宽度，向外延伸的宽度
border-image-repeat	repeat(重复) stretch(拉伸) round(铺满)	设置图片是否重复，拉伸，铺满

border-image-slice解析:
首先，这个属性的属性值有四种写法，一个值的时候代表四个方向的截取值都一样，两个值对应上下，左右，三个值对应上，左右，下，四个值对应上，右，下，左。widtn和outset的值也是这四种写法。
用四个值的写法来举例，分析这个属性到底有什么用:
假设值为: 10px 20px 30px 40px
然后用来设置边框的图如下所示:

每个值对应的切割范围如下:

其中上分切割区域的宽度就对应第一个值10px，右分割区域的宽度对应第二个值20px,下分割区域的宽度对应第三个值30px,左分割区域的宽度对应第四个值40px,通过这几个区域，就将图片分割成了左上，上中，右上，左中，中间，右中，左下，下中，右下这九个部分，由于值不是fill,所以在用这几个部分制作图片边框时，中间会被舍弃掉。
图片边框左上角就取用左上这块切割的图，高10px,宽40px，右上角取用右上这块切割出的图，高10px,宽20px，依此类推，左下角，右下角分别是高30px,宽40px的切割图和高30px,宽20px的切割图。
而边框的中间部分，则分别是剩下的四块图，上边框对应上中这块图，以此类推，右，下，左边框对应右中，下中，左中这三块图，这时候就要看 border-image-repeat的属性值了，如果是repeat和round，这几块图会一直循环，如果是stretch，这几块图就会被拉伸，然后组成图片边框的中间部分。

ps:如果没有设置border-image-slice,图片边框的四个角就是缩小到对应尺寸的整张图片，连接四个角的中间部分将是空白。