图片作用与边框进行展示

在项目开发中，我们经常会看到如下几个数据可视化，他们的边框是如此的完美，因此我们需要用到的是 边框图片 border-image

1、切图原理

切图原理：把四个角切出去（九宫格的由来），保证四个角的完整性，中间部分可以铺排、拉伸或者环绕。按照 上右下左 顺序切割

2、边框图片语法

属性	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移，（裁剪的尺寸，一定不加单位，上右下左的顺序）
border-image-width	图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）
border-image-repeat	图片边框是否应平铺（repeat）、铺满（round）或拉伸（sretch） 默认拉伸

<style>
  div{
    width: 400px;
    height: 300px;
    border: 15px solid pink;
    border-image-source: url(images/border.png);
    border-image-slice: 30 30 30 30;
    // 该属性默认的是 border 边框图片的宽度，不会挤压文字
    border-image-width: 30px;
    border-image-repeat: round;
  }
</style>

最后实现的效果