CSS3 border-image介绍

9 May

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

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

border-image-clip

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

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

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

比如水平平铺(9宫格里上中,下中部分平铺),垂直拉伸(9宫格里中右,中左部分拉伸),所谓一图胜千言:

border-image-round

.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-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-box-shadow

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

border-image-sample

最后根据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;

Leave a Reply

Your email address will not be published. Required fields are marked *