如何与border-image玩耍？

强行标题

整理知识盲点时发现了这个奇怪的属性（解决1px边框问题）。测试了多张图片，一切行为都很诡异，这激发了我强烈的好奇心。于是从百度扒了一张九宫格的图片用来测试

图片分辨率：200px / 200px（图片分辨率对该属性非常关键）

影响属性

border-image依存于border属性，但只受宽度影响，覆盖以下效果（边框样式 / 边框背景色）

谜之根源repeat属性

border-image: url(./1.png) 88 round;   //←结尾关键字为repeat属性
border-image-repeat: round;       //单独设置repeat属性，散装写法     

round

属性默认格式，重复区平滑过渡，
此时四个边角占用88px，需要被重复的中心部分为 200 - 88*2 = 24px
24px图像被重复排列并前后完美过度

• 应用场景：如果中心部分的“24px”是一个完整的图像，则可以多次完美重复这个个体（前后融合）

repeat

重复格式，边缘部分并没有做完美的处理，出现了比较碎片化的观感
repeat比较佛系，同样是排列24px图像，repeat排到哪里算哪里

stretch

拉伸格式，填充部分被延展，拉伸。这个没什么好说的

• 如果图像的中心部分不需要被重复，或视觉上无需体现，拉伸无疑是运算效率最高的属性（因为中心图像只被渲染一次）

space

空格填充，将横纵边缘的24px图像使用空白分割，在某些显示比例下不会产生空白分割

• 如果不添加空格，和round相同，都是前后完美过度
• 在某些比例下不产生空白分割
• resize时，边缘内容动态变换（其他3个属性无论如何缩放，都保持固定外观）
• space一定增加了显示成本（被空白分裂的视图和动态变换）

发现如下规律：

1. border的宽度与border-image的距离属性没 有 任 何 关 系
2. 当image的长度属性为背景图分辨率的1/3时，边框等比于原图，所以200px的宽高，设置属性为66.6即可完美呈现（此时repeat属性行为一致，space属性除外）
   该图片距离属性为66.6
   
3. 当image的距离属性等于或高于背景图单向分辨率的1/2时，border-image的repeat属性不再有意义（因为产生的效果全是相同的，space属性除外）
   该图片距离属性为100,3种重复属性已不存在区别
   
4. 总结公式： repeat属性的无效区间 = 分辨率1/3 分辨率 > 1/2 （以200分辨率为例，repeat在 66.6，100及以上的设置中不具有任何差异，space属性除外）
5. 当image的距离属性大于背景图单向分辨率的1/2时，四个边缘断裂，只剩余上下左右4个边角，因为中间部位已经被完全分配给了四个边角，四个边缘是空白且透明的
   该图片距离属性为101
   

完~