CSS3为边框应用图片border-image

border-image顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：

background:url(//cdn.lan16.com/images/articles/35/20160915124958.png) 10px 20px no-repeat;

但是又比背景图片复杂一些。

想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，是不是像传说中的九宫图，如下：

我们把上图当作边框图片 来应用一下， 看一看是什么效果,根据border-image的语法：

#border-image{

background:#F4FFFA;

width:210px;

height:210px;

border:70px solid #ddd;

border-image:url(//cdn.lan16.com/images/articles/35/20160915124958.png) 70 repeat

}

效果如下：

从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的。