CSS3属性border-image详解(边框图片)

border-image一共有4项参数,本文将对这4项参数依次讲解及举例说明,为了方便理解,先介绍最常用的使用方式。

语法:border-image: url(bbs0101.png) A B C D;  第一个参数url就是背景图片路径,不做过多解释,其次4个参数ABCD表示4个像素值,不需要带单位,默认为px,同时也可以设置为百分比,百分比是针对背景图片计算的,比如图片宽100px,A=20%=100px*20%=20px,依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离,如图所示:

border-image详解

border-image详解

当设置好ABCD四个值之后,相当于按照这4个值对图片切了4刀,形成一个九宫格,此时我们需要按照以下两步分析border-image的工作原理:

  1. 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上,同时按照盒子border四个角的尺寸进行缩放直至铺满
  2. 然后分离出每条边中间的区域即A、B、C、D所在的四个区域,分别放到盒子border的对应4个位置上,同时按照border对应区域的尺寸进行缩放直至铺满

背景图如图所示:此图尺寸为90*90 中间所有小菱形等尺寸。

源背景图片

源背景图片

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30;
 }
<div class="box5"></div>

样例图片:

border-image

border-image

此时可以说此种情况(border-image: url(bbs0101.png) A B C D;)的border-image已经完成渲染工作,不过这里的第二步中采用的是拉伸方式(默认方式:stretch)铺满边框,我们还可以手动设置成repeat以按照平铺方式渲染,如下:

语法:border-image: url(bbs0101.png) A B C D repeat repeat;

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30 repeat repeat;
 }
<div class="box5"></div>

样例图片:

border-image:repeat

border-image:repeat

这段样式中总共写了2个repeat,第一个repeat定义上边(A区域)和下边(C区域)是否进行水平重复,第二个repeat定义左边(D区域)和右边(B区域)是否进行垂直重复,举例如下:

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30 repeat stretch;
 }

样例图片:

border-image

border-image

以上的样例中边框宽度是通过设置border:20;来完成的,这里需要声明一下,如果想使用border-image属性则border必须存在且border-width必须要大于0,但是是不是只能border的尺寸来控制border-image的尺寸呢,我这么问当然就不是了,这里再介绍border-image的最后一个参数W

语法:border-image: url(bbs0101.png) A B C D/W repeat repeat;

W为border-image各边框宽度,设置时需要带上单位px,即使设置了W,也不能设置border-width=0!

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch;
 }

样例图片:从上到下依次为W=10px、W=20px、W=30px

W=10px

W=10px

border-image

W=20px

W=30px

W=30px

以上已经将border-image的所有参数都讲解了一下,以下将对一些特殊情况以及一些小技巧进行一下举例说明:

一.当只设置url一个属性的时候,A=C=图片height,B=D=图片width

样例代码:

.box5 {
 border: 20px;
 width: 60px;
 height: 60px;
 border-image: url(images/border-image.png);
 }

样例图片:

border-image

border-image

二.当只设置一个切割尺寸P的时候,A=B=C=D=P

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30;
 }

样例图片:

border-image

border-image

三.当只设置一个重复方式的时候,表示四条边框重复方式相同

样例代码:

.box5 {
    border: 20px;
    width: 60px;
    height: 60px;
    border-image: url(images/border-image.png) 30 repeat;
 }

样例图片:

border-image:repeat

border-image:repeat.

此外针对重复方式还有一个属性就是round,意思是平铺,据说和repeat是有区别的,但是目前没有浏览器体现出round和repeat的区别,所以暂不考虑round属性。

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

一个小小的border-image属性,原本以为几句话可以说清楚,没想到写了满满一页还觉得说的不够详细,以后慢慢完善吧,今天实在是不想写了,如果有一定基础的你想必能看懂吧,O(∩_∩)O哈哈~