最近在做小程序的时候，需要实现在界面的四周添上一圈图片边框，一开始直接把边框当另外一个背景，跟原来背景嵌套，使用background-blend-mode。但是发现在不同设备下，边框的长短难以调整。于是分成了4条边框，分别做背景，然后repeat。因为这样做实在太挫了，在小伙伴的推荐下，使用了border-image。
分类
border-image分成下面这五类，初始值如下:
-
1 border-image-source: none
-
2 border-image-slice: 100%
-
3 border-image-width: 1
-
4 border-image-outset: 0
-
5 border-image-repeat: stretch
1. border-image-source：
border-image: none | <image>
定边框图片的地址
2. bordre-image-slice：
bordre-image-slice [ <number> | <percentage> ]{1,4} && fill?
边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格。
border-image-slice 四条线的值类型为：number | percentage。 number 不带单位的数值。1 代表 1个图片像素。 正确写法
border-image-slice: 10 10 10 10
border-image-slice: 10% 10% 10% 10%
percentage 百分比。 关键字fill的作用是：将border-image-source九宫格中间那一块切片作为DOM节点的背景。
3.border-image-width
border-image-width: [<length> | <percentage> | <number> | auto]{1, 4}
边框宽度，刚DOM节点分割成九宫格。与border-image-slice对应。
length：带px, em单位的尺寸
percentage：百分比
number: 不带单位的数字，表示border-width的倍数
auto：使用auto，border-image-width会使用border-image-slice的值。
4.border-image-outset
border-image-outset: [ <length> | <number> ]{1,4}
border-image-outset 字面意思是边框图片开端。作用是重新指定 border image area 的边界。
5.border-image-repeat
border-image-repeat: [stretch | repeat | round | space]{1, 2}
接收俩参数，第一个水平方向平铺，第二个垂直方向平铺。九宫格中间的区域受到俩参数影响。
repeat与round区别： round除了能平铺外还可以通过伸缩使背景完整显示
round与space区别： 虽然都能使背景完整显示space在小方块之间有一定空隙
简写
border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>
