border-image属性总结

border-image是一个挺“复杂”的属性，主要使用场景有：

• 元素边框不规则的情况。这时候，就需要用设计图作为边框背景，border-image与background-image相比，好处是更具灵活性，可以用代码控制边框背景的拉伸和重复，因而能够创造出更多样的效果
• 按钮宽高不确定的情况。用border-image来制作按钮，可以用同一张背景图，制造出各种宽高的按钮。

 

菜鸟、W3SCHOOL关于border-image的教程翻译得很差。通过网络学习和个人理解，总结如下：

 

border-image-source

边框背景图，可以是绝对路径或相对路径，也可以为none

 

border-image-slice

图片剪裁位置，可以设1-4个参数，顺序跟margin、padding等一样。通过参数来确定对 border-image-source 图片的剪裁线，如下图：

从而将边框背景图剪裁成9个部分，分别用来填充div中对应的9个位置。每个位置的填充规则不一样，后续再提。

注意，border-image-slice 的单位如果是px时，只写数字，例如border-image-slice: 27

【提醒：border-image-slice的作用只是把背景图划分成9小块。而这9小块在div中显示多宽多高，和背景图的尺寸没有关系，是跟border-image-width有关系】

 

border-image-repeat

如上图，四个边角只会呆在border的四个角，并且水平和垂直方向均被拉伸。

上下左右四个区域的图片，如何渲染到div中，是根据border-image-repeat决定。默认值是stretch（拉伸，即将该区域的图片单个拉伸），可选参数还有round（平铺，会凑整填充进行了适度的拉伸）。repeat（重复，不进行拉伸，不凑整,容易出现空格间隙）。

再说一遍，border-image-repeat 只是设定上下左右四个区域的图片如何填充渲染，而四个边角不能设置。

 

border-image-width

边框背景宽度（即边框背景以多大的尺寸显示出来）

 

border-image-width 和 border-width 各自的作用是什么？通过两个例子来看：

上图中，border-width 是30px，border-image-width 是15px，所以边框图片被缩小成15px的尺寸填充到border里面。

再看上图，border-width 还是30px，border-image-width 是60px，所以边框图片被放大到60px的尺寸填充到border里面，甚至超出了border区域，延伸到盒子的background当中。

所以，border-image图片填充的区域大小，取决于 border-image-width ，跟素材图尺寸无关，跟border-width也无关。只是在不设置border-image-width的时候，它的值默认等于border-width。

 

border-image-outset

边框背景扩散，相当于把原来的贴图位置向外延伸。

 

复合语法

border-image: source slice width outset repeat|initial|inherit;

其中，border-image-width 通常省略，取border-width的值，border-image-outset也很少用。所以实际应用中最常用的写法就是：border-image: source slice round;

 

最后，border要在border-image之前设置，否则在chrome可能显示不正确。