border-image的使用？

border-image的属性

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat ：
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

代码示例：

代码示例：
 body {
      background-color: pink;
    }
    .box {
      width: 200px;
      height: 100px;
      margin: 200px auto;
      border: 100px solid transparent;
      border-image-source: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.7lsyO1_Jiunp8cJJuiFjzQHaFY?w=281&h=204&c=7&r=0&o=5&dpr=1.3&pid=1.7);   /*  图片路径  */ 
      border-image-slice: 45 50 85 45;        /* 图片切割尺寸(一定不要加单位) */
      border-image-width: 45px 50px 85px 45px;  /* 边框图片的宽高要加单位 */
      border-image-repeat: stretch;     /* 定义图片如何填充边框。 */
      /* 
      stretch拉伸图片以填充边框。
      repeat平铺图片以填充边框。
      round平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
      space平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

       */
    }

页面效果如下：

总结：

记住这几个就可以了！！
border-image-source ==> 边框图片的路径
border-image-slice ==> 边框图片的切割尺寸（不可以加单位px）
border-image-width ==> 边框图片的宽高
border-image-repeat ==> 边框图片的填充方式