CSS3： border-image的总结

【border-image属性】是用来给元素边框添加背景图像。

语法：

border-image：<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | /<‘border-image-width’>? / <‘border-image-outset’> ]? ||<‘border-image-repeat’>

例如：

我的完整写法是

  .border-image-all{ border:27px solid #000; border-image:url(http://img.xiaoho.com/2014/09/border.png) 27 27 27 27 fill/27px 27px 27px 27px/27px 27px 27px 27px repeat;}

注：应用于:所有元素，除表单元格 border-collapse 是 collapse外.

简单的来介绍一下border-image的参数，让大家在脑海中有下初步的概念：

1、none:是border-image的默认值，如果取值为none时，表示边框无背景图片；

2、<image>：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址或 linear-gradient（线性渐变）或 radial-gradient（径向渐变），来指定背景图片；

3、<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；

4、<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；

5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。

    border-image有五大属性值，分别是：图片地址border-image-source、剪切引入的图片border-image-slice、图片宽度border-image-width、边框图片延伸到盒子外的距离border-image-outset、图片的排列方式border-image-repeat。

下面就详细的来介绍上面的五个属性的使用方法和其各自的特性，从而更好的深化border-image的相关知识点。

一：border-image-source

 语法：

  border-image-source:none | <image>

  初始值：none

  border-image-source是通过url()调用背景图片，图片的路径可以是相对地址或绝对地址或 linear-gradient（线性渐变）或 radial-gradient（径向渐变），比如

border-image: linear-gradient(to top, red, orange, yellow) 6;

，当然你不想使用背景图片你也可以把值设置为none，即：border-image:none；其默认值就是none。

二、border-image-slice

语法：

  border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

 初始值：none

border-image-slice是用来剪切引入进来的背景图片，这个参数相对来说比较复杂和特别，主要表现在以下几点：
1、其取值支持:<number> | <percentage>其中number是没有单位的，专指像素px，因为其默认的单位就是像素px，所以在使用number时不需要加上单位，如果加上了单位反而是错误的写法。另外我们除了直接用nuember来设置外，我们还可以使用百分比值来表示，百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小，如图所示：
正如上图所示:border-image-slice中的number或者percentage我们都可取1~4个值，这个类似于我们border-width的取值方式，也是遵从top,right,bottom,left的规则，具体的使用规则我想大家都非常清楚，如果不清楚的朋友可以参考CSS2中的border-width或者padding,margin等属性的使用方法。
fill：从字面上说是就是填充，图片边界的中间部分区域是一直存在的，如果使用这个关键字时，图片边界的中间部分将保留下来,即显示中间内容块的剪切图片。图片边界的中间部分的内容默认情况下是为空的，即图片边界的中间部分的内容显示空白，没有内容。（总之，fill为可选属性值，假如指定，那么中间内容块不是透明块，显示中间内容块的剪切图片；假如不指定，那么为透明图片处理。）
例如：

  （一）：使用border-image-slice：fill的情况：

（二）：不使用border-image-slice：fill的情况：

2、剪切的特性(slice)，在border-image中slice是一个关键部分，也是让人难以理解的部分。如果你用过CSS3中的clip属性，那么在理解border-image-slice来说相对会轻松一些。border-image-slice虽然表意上说不是剪切，但在我们实际应用中他就是一种纯粹的剪切，他把我们通过border-image-source取到的图片切成了九份，在像background-image一样重新布置。前面我们说了他有1～4个参数，类似于border-width的方位规则，在把剪切到的图片重新分布给它们。我们来看一个W3C官网的一个实例，首先来看其剪切示意图

CSS Code:

  div {
    border: double green 12px;
    -moz-border-image: url("../image/border.png") 124;
    -webkit-border-image: url("../image/border.png") 124;
    -o-border-image: url("../image/border.png") 124;
    border-image: url("../image/border.png") 124;
  }

从上面的示意中，他在距边框背景图的top,right,bottom,left四边的124px分别切了一刀（蓝色细线为剪切线），这样一来我们就把背景图切成了九个部分，很多地方把他称为“九宫格”。“九宫格”在本文专指由九个方格形成的距形布局图，正如上面的示意图，我们对其进行四刀切后，刚好把图切成九个部分，无意间稳合“九宫格”的模型，这样一来我们就应用这个“九宫格”来帮助我们了解border-image的绘制原理。下面这张图是来自W3C官网的一张border背景图，也是一张重要的示意图，因为这张图刚好具有我们所说的“九宫格”（27×3）×（27×3）。

上图更能帮助我们理解border-image的剪切和绘制原理，1、2、3、4四条蓝色切割线分别在距边框背景图四边的27px地方切了四刀，刚好将border-image分成了九部分：border-top-image,border-right-image,border-bottom-image,border-left-image,border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image八个边块和最中间的内容区域，如果我们border-width刚好是27px，则上面所说的九部分正好如下图所示的对应位置：

上图右边所示的图片中，border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image四个边角部分，在border-image中是没有任何展示效果的，不会平铺，不会拉伸，我们就把他们称作是盲区；而对应的border-top-image,border-right-image,border-bottom-image,border-left-image四个黄色区域在border-image中是属于展示效果的区域。上下区域border-top-image和border-bottom-image区域受到水平方向效果影响：如果是repeat则此区域图片会水平重复，如果是round则水平平铺；如果是stretch则被水平拉伸，针对这个我们分别来看三个示例

水平round效果:

  .border-image {
    width: 150px;
    height: 100px;
    border: 27px solid orange;
  }
  .border-image-round {
     -webkit-border-image: url("../images/border.png") 27 round stretch;
     -moz-border-image: url("../images/border.png") 27 round stretch;
     -o-border-image: url("../images/border.png") 27 round stretch;
     border-image: url("../images/border.png") 27 round stretch;
   }

 

效果：

水平repeat效果

  .border-image-repeat {
    -webkit-border-image: url("../images/border.png") 27 repeat stretch;
    -moz-border-image: url("../images/border.png") 27 repeat stretch;
    -o-border-image: url("../images/border.png") 27 repeat stretch;
    border-image: url("../images/border.png") 27 repeat stretch;
  }

 

效果：

水平拉伸效果

   .border-image-stretch {
     -webkit-border-image: url("../images/border.png") 27 stretch round;
     -moz-border-image: url("../images/border.png") 27 stretch round;
     -o-border-image: url("../images/border.png") 27 stretch round;
     border-image: url("../images/border.png") 27 stretch round;
  }

 

效果：

上面分别展示了水平方向的区域作用效果，border-right-image和border-left-image和前面所讲的水平区域作用是类似的，只不过这两个参数是作用在垂直方向，换句话简单点说，border-right-image和border-left-image只能作用在垂直方向才有效果，同样round,repeat,stretch影响其作用效果，我们分别来看看和水平方向有什么共同之处和不同之处

垂直方向的round效果

 .border-image-round-val {
   -webkit-border-image: url("../images/border.png") 27 stretch round;
   -moz-border-image: url("../images/border.png") 27 stretch round;
   -o-border-image: url("../images/border.png") 27 stretch round;
   border-image: url("../images/border.png") 27 stretch round; 
 }

 

效果：

垂直方向的repeat效果

      
  .border-image-repeat-val {
    -webkit-border-image: url("../images/border.png") 27 stretch repeat;
    -moz-border-image: url("../images/border.png") 27 stretch repeat;
    -o-border-image: url("../images/border.png") 27 stretch repeat;
    border-image: url("../images/border.png") 27 stretch repeat; 
  }

 

效果：

垂直方向的stretch效果

      
 .border-image-stretch-val {
   -webkit-border-image: url("../images/border.png") 27 round stretch;
   -moz-border-image: url("../images/border.png") 27 round stretch;
   -o-border-image: url("../images/border.png") 27 round stretch;
   border-image: url("../images/border.png") 27 round stretch; 
 }

 

效果：

对于中间区块它是受到两个方向的作用，也就是说同时在水平和垂直两个方向进行round,repeat,stretch的作用。

3.

demo1：当盒子边框宽度比被切图片边框大的时候，如下代码

.border-image{

            border:54px solid #000;  //盒子边框为54px

           border-image-source:url(border.png);

            border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px

}

效果：

对此我的理解是如下步骤：

demo2：当盒子边框宽度比被切图片边框小的时候，如下代码

.border-image{

            border:14px solid #000;  //盒子边框为14px

           border-image-source:url(border.png);

            border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px

}

效果：

对此我的理解是如下步骤：

因此，我所了解的四个顶角的变化其实是带有拉伸功能的，当然假如说盒子边框和被切图片宽度相等，那么这样就不会有拉伸的效果。

两点注意：
1、slice不允许设置负值，设置大于盒子的高度或者宽度都被设置为100%
2、slice切过的区域有可能会重叠，如果右切和左切的值之和≥盒子的宽度，那么顶部区域(5号)和底部区域（7号）为空白，反之亦然。

三、边框图片宽度border-image-width

属性名称:	border-image-width
值:	[ <length> | <percentage> | <number> | auto ]{1,4}
初始值:	1

border-image-width的作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由它来做主，假如不指定，那么图片边框宽度就由盒子的边框宽度来固定。我可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度，注意哦，相关代码如下：

.border-image{ 
            border:20px solid #000;  //盒子边框宽度为20px
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。
}

四、边框图片外凸的距离：border-image-outset

属性名称:	border-image-outset
值:	[ <length> | <number> ]{1,4}
初始值:	0

border-image-outset的作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离，相关代码如下：

.border-image{ 
            border:27px solid #000;  //盒子边框宽度为27px
            border-image-source:url(border.png); 
            border-image-outset:27px 27px 27px 27px; //边框图片向设置为27px，那么背景图将会从盒子最外边界向外上右下左各延伸27px。
}

五：border-image-repeat

语法：

   border-image-repeat: [ stretch | repeat | round ]{1,2} 

border-image-repeat是用来指定border-image的排列方式，这个属性设置参数和其他的不一样，border-image-repeat不遵循top,right,bottom,left的方位原则，他只接受两个（或一个）参数值，第一个表示水平方向，第二个表示垂直方向；当取值为一个值时，表示水平和垂直方向的排列方式相同。同时其默认值是stretch，如果你省略不取值时，那么水平和垂直方向都是以stretch排列。

下面为了更好的理解border-image-repeat的使用，下面将结合border-image-slice在上面的基础上看看round,repeat,stretch的实现原理

1、Round效果：

 .border-image-round-hv {
   -webkit-border-image: url("../images/border.png") 27 round;
   -moz-border-image: url("../images/border.png") 27 round;
   -o-border-image: url("../images/border.png") 27 round;
   border-image: url("../images/border.png") 27 round; 
 }

 

效果：

前面我们说过，border-image背景图片被四刀一切分成九个部分，那么其中有四个部分成为盲区，不管什么排列方式，他都处惊不变的（border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image）,而border-top-image和border-bottom-image这两个部分是随着排列方式不同而效果不同，此处我们使用的是平铺，那么他们也只是在水平方向平铺；另外两个border-right-image和border-left-image只是在垂直方向进行平铺,中间部分同时在水平和垂直方向平铺，如下图所示：

2、Repeat效果

 .border-image-repeat-hv {
   -webkit-border-image: url("../images/border.png") 27 repeat;
   -moz-border-image: url("../images/border.png") 27 repeat;
   -o-border-image: url("../images/border.png") 27 repeat;
   border-image: url("../images/border.png") 27 repeat; 
 }

 

效果：

大家从效果图中可以看出在四条边的初始处和结尾片都有一个菱形显示不全，好像被切掉一样的，因为使用repeat和round不一样，round会压缩或伸展border-image的背景图片以其刚好适应border-width的宽度，从而正好在边框区域内显示，而repeat就不一样了，他不管什么适合不适合，直接居中重复，我个人认为repeat是边框中间向两端重复。因此大家可记住了：round平铺可能会改变边框背景图片大小来适应边框宽度排列，repeat重复是不改变背景图片大小而直接从中间向两端排列。

3、Stretch效果

 .border-image-stretch-hv {
    -webkit-border-image: url("../images/border.png") 27 stretch;
    -moz-border-image: url("../images/border.png") 27 stretch;
    -o-border-image: url("../images/border.png") 27 stretch;
    border-image: url("../images/border.png") 27 stretch;
 }

 

效果：

从效果图可以得知，使用stretch和前面使用round,repeat原理是一样的，只不过方式换成了stretch，所以stretch也遵循前面的round所显示的九宫变换图，只不过此处不是平铺了，而是变成了stretch了。

这里有一点需要提出的是我们repeat和round两种排列方式在webkit内核下显示的效果是一致的，没有什么区分，所以在safari和chrome浏览器中看到的repeat和round是一样的效果，但在Mozilla和Opera下他们还是有明显的区别哟，如下所示：

Safari和Chrome下的round/repeat效果

总而言之：repeat参数是一直重复的，它是不改变背景图片大小而直接从中间向两端排列，然后超出部分剪裁掉。

Round 参数：round平铺可能会改变边框背景图片大小来铺满边框宽度排列，为了实现圆满所以会压缩（或拉伸）。

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。

注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

Firefox 26.0 下是可以准确区分的。

border-image的兼容性

border-image的属性优势