border-image用法

今天在适配UI设计的页面，有一个配置难住了我这个前端半吊子。

如下的边框：

刚开始我把它作为背景图片进行设置。

.div{
    width: 40%;
    height: 300px;
    background-image: url('../assets/border.png');
    background-repeat: round;
    background-size: cover;
}

由于div是使用的flex弹性盒子布局，这样在某个尺寸的情况下背景图的某个边就会显示不完全。

那么就换成border-image

.div{
    width: 40%;
    height: 300px;
    border-image-source: url('../assets/border.png');
    border-image-width: 15px;
    border-image-slice: 15 fill;
  }

效果如下：

这样如果的变化弹性盒子的大小都不会出现显示不完全的情况。

border-image-source 设置图片的地址 border-image-width 设置展示图的边框宽度 border-image-slice 这参数就是截取图的展示区域，如上面的15的意思就是把图片从上、右、下、左15像素开始截取显示，fill的意思是把截取中间局域的图片用来填充容器的中间。