所以，我的完整写法是
复制代码
.border-image-all{ border:27px solid #000; border-image:url(http://img.xiaoho.com/2014/09/border.png) 27 27 27 27 fill/27 27 27 27/27px 27px 27px 27px repeat;}
如你所见，这正是我的一个简写值。请不要头晕哦，虽然是一长串的各种英文单词，但是你对我恐怕也不陌生哒 QQ表情可爱
，想想css属性当中有哪些是跟图片相关的，反正我是想到了 background 属性值了。css当中引入图像的属性的属性值不外乎有：图片地址 background-image 、图片重复 background-repeat 、图片平铺方式 background-attachment 等。因此对于边框图像也是大同小异滴啦。下面我们就一一分析这些单独的属性值。
border-image有六大属性值，分别是：图片地址 border-image-source 、图片切片 border-image-slice 、图片宽度 border-image-width 、图片外凸 border-image-outset 、图片重复 border-image-repeat
图片地址border-image-source
| 属性名称: | border-image-source |
|---|---|
| 值: | none | <image> |
| 初始值: | none |
我叫引入图片地址属性，我这个属性的属性值是比较好理解滴，因为就只有两个属性值嘛，初始值是none，假如设置了none，那么我们的盒子边框就会应用 border-style 的值；假如你想要设置一个外部链接地址的图片进来那么代码可以直接写到：
复制代码
.border-image{
border:20px solid #000;
border-image-source:url(border.png); //目测我会长得很丑比 ~ .~，不信你试试
}
图片切片border-image-slice
| 属性名称: | border-image-slice |
|---|---|
| 值: | [<number> | <percentage>]{1,4} && fill? |
| 初始值: | none |
我叫border-image-slice，指定边框图像顶部、右侧、底部、左侧内偏移量。我的没有具体的单位值，比如像px、em统统不能应用在我身上，你只要给我一个单纯的数字即可，当然了你也可以按照百分比来给我设置滴啦。我的作用就是把边框图像切成9个区域：4个角、4边区域和一个中间部位，前辈们都谦虚称作9宫格，但是我悄悄跟你说哦，假如说不应用fill这个可选属性值的话，那么中间第九块格子被当做透明不见，相当于中间那块被哪条狗吃了呢！
第一个值为number，即纯数字作为单位计量，如1,2,3…；第二个值为percentage，即百分比作为单位；{1,4}表示前面的数字最少出现一次，最多出现4次，如 border-image-slice:27 border-image-slice:27 27 border-image-slice:27 27 27 border-image-slice:27 27 27 27 都是可以的，这个和 margin 的值大同小异，假如你还不懂这些缩写值具体代表什么，那么你不妨去看看前段时间写的一篇关于 margin的简写值 ，fill为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理。
