border-image
这个属性可以实现很多特殊的效果，其中常见的有九宫格。我们需要记住的是源图像的划分和九宫格的尺寸控制。其中源图像是由九个格子构成，如果每个格子尺寸是36*36的尺寸，那么我们就可以设置border-image: url('./1.svg') 36，那么显示的效果就像格子当成边框展示一样。这个属性可以重新定义元素的虚线边框和虚线尺寸以及虚线的比例。这个属性还可以实现圆角边框，这个圆角效果是border-radius无法改变的。该属性是border-image-source和border-image-slice属性的缩写。如果border-image-width关键字为auto的话，会将-slice这个属性的尺寸作为九宫格的宽度值。我们需要注意的是，这个宽度值可能会超过元素自身的尺寸。
.test {
border-image: url('xxx') 36;
border-image-width: auto;
}border-image-slice属性的作用是对原始图像进行划分。划分的规则上右下左的顺序。接收的值一个到四个数值或者是百分比值。除此之外后面还可以跟着一个fill关键字。加上这个关键字可以让中心点的位置进行填充。如果是百分比值是相对于元素自身的尺寸计算的，而不是相对于浏览器尺寸。-outset的值只能为正值，如果是负值会报错，如果正值表示向外扩张。接收的值和-slice不同的是接收的是长度值和数值，个数是一样的，这个属性还支持长度值和数值混合使用。当我们设置某个数值后，四边的宽度是增加的是这个数值，但是中间的宽度和高度会增加两倍。而且这个属性扩展不会影响布局和鼠标行为以及点击行为。-repeat属性可以让四个方向中间的位置进行平铺。这个值的属性值有四个，我们需要注意的是最多只能两个属性值去同时使用。这四个分别为stretch、repeat、round、space。第一个是将图像拉长然后进行填充显示区域。第二个是让图像进行平铺，但是边界位置可能会被截断。第三个和第二个不同的是进行伸缩而且边界处尽可能不会被截断。第四个彼此之间保持适当的等宽间隙，如果区域的尺寸不足的时候，就会显示空白区域。
border-image-outset: 3rem;
border-image-outset: 20px 4 30px; 
