浅析--border-image

最近在做智能数据可视化大屏项目，其中border有两种实现方式，一种是用背景图片，但是这种方式有一个我不可接受的弊端，就是不同大小的模块不能保证边框一致，会有拉伸变形的情况，所以没有采用，另一种是使用css3的新样式属性border-image，但是实现过程有点乱，所以查阅资料整理如下：

border-image都有哪些属性

菜鸟驿站关于border-image属性的介绍

border-image总共有6个属性，接下来我将一一介绍

border-image-source

这个属性是我认为这些属性中最好理解的，与之前的background-image是一样的，就是指定一张图片，作为border-image的源图片，接下来所有的属性的效果都将作用于这张图片上
我们使用网上的图片为例

为了将每个菱形做区分，我们将图片编上序号

这是一张90×90px的图片，他们每个菱形所占的位置都是一个30×30px的正方形

border-image-slice

这个属性的作用是裁切源图片,属性值与margin，padding类似，支持1-4个属性值，按照盒模型上右下左的顺序设置，比如设置属性border-image-slice:30,这将把上面的源图片分割成9份，每份都是30×30px的小图片，类似下方图片

border-image-repeat

这9块区域将负责填充div(以div为例)边框对应的9个区域，四个角的图片直接可以贴到div的四个角上，但是每个div的宽高不确定，所以四个边的边框的图片该如何设置就是border-image-repeat的作用。
他有四个属性：stretch(默认)、repeat、round、space,分别代表：不重复*拉伸*铺满，重复*不拉伸*铺满，重复*拉伸*铺满，重复*不拉伸*不铺满。
我们来看看不用样式的效果
1、border-image-repeat:stretch ：不重复*拉伸*铺满

border-image-repeat:stretch

2、border-image-repeat:repeat： 重复*不拉伸*铺满

border-image-repeat:repeat

3、border-image-repeat:round：重复*拉伸*铺满

border-image-repeat:round

4、border-image-repeat:space： 重复*不拉伸*不铺满

border-image-repeat:space

border-image-width

这个属性默认是边框的宽度，用来限制相应区域背景图的范围。首先相应背景区域的图像会根据这个属性值进行缩放。然后再重复或平铺或拉伸。

  border: 3em double orange;
  border-image: url(border.png) 27 round;
  border-image-width: 6rem;

白框为border宽度3em

border-image-width: 1.5rem;

白框为border宽度3em

border-image-outset

相当于把原来的贴图位置向外延伸。不能为负值

    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 1.5rem;
    border-image-outset: 1.5rem;

以上是关于border-image的总结，希望对大家有所帮助

参考资料：https://www.cnblogs.com/liAnran/p/11608179.html