CSS border-image属性

在CSS中border-image属性可用来自定义图片作为元素的边框。该属性要声明如下三部分：

1. 用来作为边框的图片（源图片）
2. 从哪里开始剪切这张图片（根据此值将图片切成9部分，可以是具体像素值，也可以是百分比；备注：使用具体像素值的时候，不用加单位，直接用纯数字即可）
3. 定义中间剪切部分是重复（round）还是拉伸（stretch）

下方图片为自定义边框图片的源图：

border-image属性的作用原理：以第一个取值设置边框源图片，根据第二个取值是把上述图片剪切为9部分，就像一个井字格一样。然后每边中间部分则会根据该属性第三个取值设置而拉伸或者重复，round代表重复，stretch代表拉伸。

下图是模拟将源图切割成九块的原理：

border-image属性的第二个值是用来设置如何切割的，其可以为具体像素的数值，也可以使用百分比；这个值就是上面示意图中黄绿色透明色部分（正方形）的边长，就是上面红色线条的那块；通过控制这个数值，就可以决定是如何切割成九部分的；而上图中粉红色透明的部分，就是重复或者拉伸的部分。

要想使border-image属性生效，千万别忘了设置border属性。具体的看下面的案例吧。

案例1 重复（round）

#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 round;
}

运行一下

案例2 拉升（stretch）

#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://logo.zhuanfou.com/ex_border.png) 27 stretch;
}

运行一下

案例3 其他的切割尺寸

运行一下

案例4 其他的切割尺寸

运行一下

案例5 其他的切割尺寸

运行一下