css3 border img 边框图片

摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on

border-image摘要

其实我[border-image属性]是用来给元素边框添加背景图像，在某些时候，利用这个

border-image

可以轻松绘制一些比较复杂的小部件。并且我是

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

的简写值。只不过为了方便简写，毕竟你懂得，我们家族

border-*

都是有简写值，假如作为新生儿没有，那看的人估计都醉了。


哦，对了，忘记跟你说了，我的作用就是用来代替

border-style

值的。值得注意的是假如

border-image

值是none的话，那么背景图像将不会显示，同时， 将会显示

border-style

的值。 那么我的详细简写值如下所示：

属性名称:	<dfn id="border-image">border-image</dfn>
值:	<‘border-image-source’> || <var><‘border-image-slice’></var> [ / <var><‘border-image-width’></var> | / <var><‘border-image-width’></var>? / <var><‘border-image-outset’></var> ]? || <var><‘border-image-repeat’></var>
初始值:	详见各个属性
应用于:	所有元素，除表单元格 border-collapse 是 collapse外.
是否继承:	否
百分比:	N/A
媒体:	visual
计算值:	详见各个属性
动画:	详见各个属性

所以，我的完整写法是

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

如你所见，这正是我的一个简写值。请不要头晕哦，虽然是一长串的各种英文单词，但是你对我恐怕也不陌生哒

，想想css属性当中有哪些是跟图片相关的，反正我是想到了

background

属性值了。css当中引入图像的属性的属性值不外乎有：图片地址

background-image

、图片重复

background-repeat

、图片平铺方式

background-attachment

等。因此对于边框图像也是大同小异滴啦。下面我们就一一分析这些单独的属性值。


border-image有六大属性值，分别是：图片地址border-image-source、图片切片border-image-slice、图片宽度border-image-width、图片外凸border-image-outset、图片重复border-image-repeat

图片地址border-image-source

属性名称:	border-image-source
值:	none | image
初始值:	none

我叫引入图片地址属性，我这个属性的属性值是比较好理解滴，因为就只有两个属性值嘛，初始值是none，假如设置了none，那么我们的盒子边框就会应用

border-style

的值；假如你想要设置一个外部链接地址的图片进来那么代码可以直接写到：

.border-image{
border:20px solid #000;
border-image-source:url(border.png); //目测我会长得很丑比 ~ .~，不信你试试
}

图片切片border-image-slice

属性名称:	border-image-slice
值:	[ < number> |< percentage>]{1,4} && fill?
初始值:	none

我叫border-image-slice，指定边框图像顶部、右侧、底部、左侧内偏移量。我的没有具体的单位值，比如像px、em统统不能应用在我身上，你只要给我一个单纯的数字即可，当然了你也可以按照百分比来给我设置滴啦。我的作用就是把边框图像切成9个区域：4个角、4边区域和一个中间部位，前辈们都谦虚称作9宫格，但是我悄悄跟你说哦，假如说不应用fill这个可选属性值的话，那么中间第九块格子被当做透明不见，相当于中间那块被哪条狗吃了呢！

第一个值为number，即纯数字作为单位计量，如1,2,3…；第二个值为percentage，即百分比作为单位；{1,4}表示前面的数字最少出现一次，最多出现4次，如

border-image-slice:27

border-image-slice:27 27

border-image-slice:27 27 27

border-image-slice:27 27 27 27

都是可以的，这个和

margin

的值大同小异，假如你还不懂这些缩写值具体代表什么，那么你不妨去看看前段时间写的一篇关于margin的简写值，fill为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理。

你们一定是很好奇，我具体是怎么工作机制的呢，就算csser指定了几个数字上去，但是压根就不懂他是怎么工作的，那就呵呵啦。所以下面带来详解：

图片用了w3c指定专用产品~一个81px的正方形位图，9个菱形图案，每个菱形图案为27*27px

左上角、右上角、右下角、左下角为4个橙色菱形，顶部区域、右侧区域、底部区域、左侧区域为4个土黄菱形，中间块（贱称第九区）为透明块。刚刚也说过了，这个border-image-slice就是一个切片的作用，把图像直接切开，中间不留痕迹，假如给定这个属性值：

border-image-slice:27 27 27 27

那么它代表的意思是距离顶部内偏移区域27px处横切一刀



接着距离右侧内偏移区域27px竖切一刀


紧接着距离底部内偏移区域27px横切一刀


接着距离左侧内偏移区域27px竖切一刀


那么给定图像切片

border-image-slice:27 27 27 27

完整动态图如下：


这几刀下来把我分成了9个部分，因此我被9宫格也就此由来


所以被切割的部位都分布在盒子边框这9个地方，如上所示。对应的，被分隔的图像只能在边框宽度（border-width）内活动，什么意思呢，比如盒子边框为

border-width:54px

分割图片为

border-image-slice:27

，因为图像4个顶角的宽度和高度都只有27px，但是盒子的边框是54px，因此图片就要被水平方向和垂直方向拉伸到切好跟盒子边框宽度等同，即27px的图像拉伸到54px停止，再往前就不行了！这点上，跟 鑫哥 的解释有点不太一样，因为他觉得这个是视觉中盲点，被分隔的顶角图像只是分配到边框的4个顶角，不会平铺，不会重复、不会拉伸（这点跟我说得不符合），引用原文如下：


为了证明我的观点，我用了两个demo来展示一下，

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
}

效果：



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

详情请点击：slice切片的值比边框宽度大

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
}

效果：



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

详情请点击：slice切片的值比边框宽度小

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

说说fill值 fill值是一个可选属性值，假如指定这个值，那么第九区就会出现，假如不指定，那么第九区就被外星人攻占，隐藏起来！（楼下会有demo↓） 两点注意： 1、slice不允许设置负值，设置负值和设置大于盒子的高度或者宽度都被100%，（楼下有demo↓） 2、slice切过的区域有可能会重叠，如果右切和左切的值之和≥盒子的宽度，那么顶部区域(5号)和底部区域（7号）为空白（楼下有demo↓），反之亦然。 更多详情，请各位爷轻戳：demo