CSS3 border-image 边框图像

语法：

border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

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

2、<image>：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址，来指定背景图片；

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

1、引入图片：border-image-source;

2、切割引入的图片：border-image-slice；:

3、边框的宽度：border-image-width；

4、图片的排列方式：border-image-repeat。

重点说一下border-image-slice：

语法：

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

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：从字面上说是就是填充，如果使用这个关键字时，图片边界的中间部分将保留下来。默认情况下是为空的。

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