CSS3 border-image介绍_html/css_WEB-ITnose

CSS3里border边框属性做了大幅扩展，其中border-image这个属性（顾名思义，就是可以给边框添加图片）理解和使用起来有点难度。本篇就介绍一下border-image。

先从基本的语法开始入手，例如border-image: url(border.png) 26 repeat stretch;。可以看出分成三个部分：url，剪裁位置，显示方式

首先是url，可以使用绝对或相对路径来加载边框图片，比较简单就不啰嗦了。

其次是剪裁位置，使用TRBL原则（top-right-bottom-left），上例中26就表示上右下左都剪裁26px。你可以设成26 52，就表示上下剪裁26px，左右剪裁52px。你也可以设成10 15 20 25表示上10px，右15px，下20px，左25px位置开始剪裁。单位不指定的话，默认是px像素，你也可以设成%百分比。比如一张50px * 50px的图片，你设成20%，就表示上右下左都剪裁10px。

经过上右下左剪裁后，好好一张图片就成了9宫格的样子。（9宫格大家都知道的吧？锤子手机界面就是9宫格）。一图胜千言

剪裁前该图片的尺寸是78px * 78px

经过border-image: url(border.png) 26;剪裁后成了9宫格

9宫格分为9个部分（这不是废话么…）：上右，上中，上左，中右，中中，中左，下右，下中，下左。经剪裁后，9宫格最中心的部分，即中中，不会被显示出来，会被丢弃。能显示的就是9宫格周围那一圈。其中四个角（图中红色菱形部分）就分别固定在border的四个角。即上右部分就显示在border的右上角，同理上左，下右，下左部分就分别显示在border的左上角，右下角，左下角。剩下4个部分上中，中右，中左，下中（图中蓝色菱形部分）的显示效果需要结合显示方式。

显示方式分stretch拉伸，repeat重复，round平铺。默认值是stretch拉伸。你需要对9宫格的上中和下中设置水平显示方式，对中右和中左设置垂直显示方式。

stretch拉伸最容易理解。但round平铺和repeat重复比较搞，有什么区别呢？round会改变9宫格部分的原始尺寸，而repeat重复会保留9宫格部分的原始尺寸，然后居中开始往两边无脑重复。

比如水平平铺（9宫格里上中，下中部分平铺），垂直拉伸（9宫格里中右，中左部分拉伸），所谓一图胜千言：

.border-image {    width: 120px;    height: 80px;    border: 26px solid;    border-image: url(border.png) 26 round stretch;}<div class="border-image"></div>

垂直stretch拉伸效果一目了然。水平round平铺会改变9宫格部分的原始尺寸，例中div长度是120px，9宫格裁剪后一个蓝色菱形是26px，因此可以显示4.6个蓝色菱形，四舍五入会显示5个蓝色菱形，每个菱形被缩小成了24px。

那我们试试将水平改成repeat重复，看看有什么差别，所谓一图胜千言：

.border-image {    width: 120px;    height: 80px;    border: 26px solid;    border-image: url(border.png) 26 repeat stretch;}<div class="border-image"></div>

repeat重复会保留9宫格部分的原始尺寸（每个蓝色菱形仍旧26px），然后居中开始往两边无脑重复，最终显示4.6个蓝色菱形

水平和垂直如果是同样值，不必重复敲代码：border-image: url(border.png) 26 round;即可。等价于border-image: url(border.png) 26 round round;。因为显示方式的默认值是stretch拉伸。所以border-image: url(border.png) 26;等价于border-image: url(border.png) 26 stretch stretch;

用法介绍完了，有什么用呢？这就得发挥想象力了。比如一些漂亮的页面效果。原始png图：

用border-image给div的边框加上该图片后，该div的效果：

最后根据Can I Use显示该属性在IE上有兼容性问题，只有IE11才开始支持。（对于IE，或曰对于微软我早已无力吐槽）

其他浏览器最新版，直接用border-image没问题。但旧版需要加上前缀，参考MDN通常这样写：

-moz-border-image:url("border.png") 30 30 repeat; /* Old Firefox */ -webkit-border-image:url("border.png") 30 30 repeat; /* Safari */ -o-border-image:url("border.png") 30 30 repeat; /* Opera */ border-image:url("border.png") 30 30 repeat;