什么你现在才开始用border-image

最近小编遇到一件事，小编以前的大学同学跟我说最近在开发一个网页ui整了很多花里胡哨的边框，他说他第一想法就是弄背景图处理，问我一般怎么处理

小编我常用两种办法：第一种就是他说的背景图，第二种就是border-image

border-image见名思意就是给border设置图片，出来的时间相对小编来说算早的了在2017年问世，兼容性已经非常不错了

border-image有五个属性值：

border-image-source设置边框图像的地址也可以使用渐变色

// 边框设置图像
border-image-source: url('/exampleImg.png'); 
// 边框设置成渐变色
border-image-source: linear-gradient(to top, red, yellow)

border-image-width设置边框图像的的宽度

// 上 下 左 右边框都为30px
border-image-width:30px

border-image-repeat设置图片如何填充边框

//拉伸图片填充
border-image-repeat:strectch;
//平铺图片填充
border-image-repeat:repeat; 
//平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
border-image-repeat:round;
// 平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
border-image-repeat:space;
// 继承父级元素的计算值
border-image-repeat:inherit;

border-image-outset边框图像可超出边框盒的大小。

// 顶 右 底 左 
border-image-outset: 7px 10% 14px 5px;

border-image-slice将使用 border-image-source 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像 这个需要点想象力了。它会把图像分割为 9 个区域：四个角、四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

• 区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
• 区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
• 区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作元素的背景图像(它的层级在背景图之上)。

// 图片四面都切30%
border-image-slice: 30%;
// 垂直和水平
border-image-slice: 10% 20;
// 上 水平 下
border-image-slice: 7 12 14;
// fill 使中心图像显示出来
border-image-slice: 10% 20 fill;

以MDN给的例子为例：

这是一个长宽为30px的图片如果设置他的切片为30，则切片按上图切片方式则是这个如下：

最后切片如下：

我们如果把border-image-slice设置成10 20 则图片切片如下 border-image-slice 其实可以理解成就是那四个交叉角的位置，以这四个点对图片进行切图

如果觉得对您有帮助的话，给小编点个关注，小编会定期分享一些前端小知识和有趣的工具！