border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)。
1、图片资源(border-image-source)
border-image: none | <image>
border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;
none 表示border-image不做任何效果，边框使用 border-style 指定的样式。
2、图片剪裁位置(border-image-slice)
bordre-image-slice [<number> | <percentage>]{1,4} && fill?
border-image-slice 从名字上看就很好理解：边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，如下：
border-image-slice 四条线的值类型为：number | percentage
- 没有单位，默认单位就是像素(px)。例如：border-image:url(border.png) 27 repeat;这里的27专指27px。
- 支持百分比值，百分比值大小是相对于边框图片的大小，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%”的示意可以用下图表示：
关键字：fill
作用是将border-image-source九宫格中间那一块切片作为DOM节点的背景。
素材图片box.png:
.box {
width: 27px;
height:27px;
border: 27px solid;
border-image: url(box.png) 27 27 27 27 fill repeat stretch;
}
3、边框背景宽度(border-image-width)
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width 字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格。
假设 border-image-slice 分割 border-image-source 的九宫格为A， border-image-width 分割 DOM 的九宫格为 B，A 与 B 的每个格子存在一一对应关系，具体如下：
border-image-width 参数的四种类型:
- length 带 px, em, in … 单位的尺寸值
- percentage 百分比
- number 不带单位的数字；它表示 border-width 的倍数
- auto 使用 auto， border-image-width 将会使用 border-image-slice 的值
注：
- border-image-width 的参数不能为负值
- border-image-width的缺省值是number类型：1
4、重复性(border-image-repeat)
border-image-repeat: [ stretch | repeat | round | space ]{1,2}
border-image-repeat 字面意义是 边框图片平铺。作用是指定 border-image 的平铺方式。语法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式，九宫格的中间区域受这两参数的共同影响，如下：
- round 与 repeat 的区别：round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。
- round 与 space 的区别：虽然都是凑整填充显示，但是 space 是在小方块之间有一定的空隙。
5、边框背景扩散(border-image-outset)
border-image-outset: [ <length> | <number> ]{1,4}
border-image-outset作用是把原来的贴图位置向外延伸
.box {
margin: 0 auto;
width: 81px;
height: 81px;
border: 27px solid rgba(0,0,0,.1);
border-image-source: url(//misc.aotu.io/leeenx/border-image/box.png);
border-image-slice: 27 27 27 27;
border-image-repeat: repeat;
}
.outset {
border-image-outset: 27px;
}
注：
- border-image-outset 的值不能为负值
6、border image area
用于绘画 border image 的区域叫 border image area，它默认与边框盒子(border box)完全重合。简单地说，border image area 就是 border-image-width 分割出来的九宫格。
6.1 border-box 与 border image area 的关系
上面有提到，border image area 默认与 border-box 是重合关系。
如果把标准后退到发展阶段，在发展阶段，DOM节点由 border-width 分割为九宫格，这个时期的 border-box 就是 border image area。
到了成熟阶段（即本章介绍的版本），border-box 与 border image area 是默认重合的两个空间，border-box 只负责盒子模型上的事务，border image area 则专注于边框图像空间分割。
6.2 border-width 可以分割 border image area吗？
在实际使用过程中，发现 border-width 也可以分割 border image area。如下：
.box {
margin: 0 auto;
width: 27px;
height: 27px;
border: 27px solid rgba(242,181,78,.3);
border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
border-image-slice: 27 27 27 27 fill;
border-image-repeat: stretch stretch;
}
.box {
margin: 0 auto;
width: 27px;
height: 27px;
border: 27px solid rgba(242,181,78,.3);
border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
border-image-slice: 27 27 27 27 fill;
border-image-outset: 10px;
border-image-repeat: stretch stretch;
}
7、简写：border-image
border-image:
<‘border-image-source’> ||
<‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? ||
<‘border-image-repeat’>
由于 border-image-slice、border-image-width 与 border-image-outset 这三者的参数相似，所以有必要说一下，这三个参数在简写里有两个注意点:
- border-image-outset 参数一定要在 border-image-width 之后，假设border-image-width缺省，仍然需要在原来 border-image-width 写上 /，如下：
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
- 如果有 border-image-width/ border-image-outset 属性值，border-image-slice必须指定数值，否则不合语法，如下：
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;
