css边框图片的使用场景

做大屏可视化的时候，往往会有一些边框的背景图片，但是由于可视化的盒子宽高是自适应的，也就是宽度和高度是不固定的；
背景图片（原图）如下：

普通的做法就是直接把这个背景图片铺满整个盒子，但是你会发现图片会变形，有明显的拉伸效果：

使用边框图片就可以解决这个问题：

原理就是把这张图片切四刀，保证四个角的图片的比例不变，也就是四个角不会变形（1，3，6，8），然后2，4，5，7的位置拉伸或填充，这样无论盒子是多高多宽，都不会破坏图片四个角的比例；
代码如下：

border: 1px solid transparent;
border-image: url("./boder3.png") 400/100px/0px repeat;

注意：边框图片的大小不是由border的像素决定的，但是又必须要有border属性，否则border-image会不生效；border-image的第一个属性是图片地址，第二个属性是切的距离，第三个属性是边框的大小，第四个属性比较不常用，默认为0就好，第五个属性是选择填充还是拉伸；
效果如下：