深入浅出CSS3：background-clip,background-origin和border-image教程(3)
.border { background:url("images/tool-bar/bg_b_c.png"), url("images/tool-bar/bg_b_l.png"), url("images/tool-bar/bg_b_r.png"); background-repeat:repeat-x,no-repeat,no-repeat; background-position:center,left center, right center; -moz-background-clip: padding,border,border; -moz-background-origin: content,border,border; border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/ border-style:dashed; border-color:Red; width:180px; height:90px; /*因为要适应图片，所以宽度改小一点*/ padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/ margin:0 auto; }
重要提示！写到这一步，可以从上图看到已经快大功告成了。把左右的红色边框去掉就可以了——那么把 border-color改为none或是直接去掉这句话？不行的。如果不设置颜色的话边框就会变成黑色，因为边框有样式，而且样式还有11px宽啊，所以会用默认的黑色来填充。现在你可能又会觉得是边框样式border-style的问题，那咱们把样式去掉，把宽度保留？也不行，因为如果没有样式宽度是无效的，结果会如下图(我们可以从firebug中看到边框的宽度是0，虽然仍然保留border-width)。所以border- style,border-color,border-width缺一不可！这一点要十分注意！
步骤五：
综上所述，你可能会觉得既不能改border-style又不能改border-color岂不是没辙了？正确答案是——还是修改 border-color，别忘了，color还有一个值transparent，透明。颜色还让它在，但只要人们看不见就行了。我们实现它：
.button { background:url("images/Fancybox/fancy_title_main.png"), url("images/Fancybox/fancy_title_left.png"), url("images/Fancybox/fancy_title_right.png"); background-repeat:repeat-x,no-repeat,no-repeat; background-position:center,left,right; background-clip: padding-box,border-box,border-box; background-origin:padding-box,border-box,border-box; -moz-background-clip: padding,border,border; -moz-background-origin: content,border,border; border-width:0 15px; border-style:dashed; border-color:transparent; width:80px; height:32px; }
OK，彻底大功告成，很简单不是吗。
四．border-image& lt;/strong>
写到这里我发现文章的战线貌似拉的有点长了。所以我打算border-image在这里只是作为附加内容说明，并不会深究，尽可能简扼一些。开始（所以废话也简扼一些……）：
border-image是定位在边框上的图片——那不是和把background-origin属性设为border差不多一个意思？是的，的确有这层含义。但在接下来的说明和例子中，你将看到它的便利之处。
这个属性说到底还是在捣鼓一张图片。先直接看一张说明图片：
草图左边是举例border-image所使用的图片，右边的草图是比喻一个盒子。border- image有两个值需要设定，头一个是切割属性(border-image-slice)，最多有四个值可以设置，命名规则和margin、 padding都是一致的，顺序上右下左。四个值对应左边草图的不同区域的宽度，同样上右下左的顺序，也就是2，6，8，4区域的宽度（4、6区域为横向长度，2，8区域为丛向长度）。从图中可知，因为是交集的缘故，只要定义好这四块的宽度，1、3、9、7区域的长宽也就随之确定。在映射到盒子模型上，从 1到9（除5）正好连成盒子的边框区域，这样盒子的边框图片就有着落了。
但还有一个疑问。如果实际图片真如左边草图那么小，而实际盒子真有右边草图的那么大，那2、6、8、4区域的图片可能就不够用呀？问得好，所以border-image还提供一种机制来处理这个问题——图片重复属性(border-image- repeat)，也叫拉伸值(stretch value)。有四个值可以选择：stretch(拉伸且默认)、repeat（重复）、round（平铺）。是不是听着很耳熟，对，和电脑壁纸的位置属性是一样的。对每一张border-image最多可以设置两个拉伸属性如round round。前一个针对图片侧边(除5区域以外)，后一个针对中间部分，即5区域。如果只有一个值的话，则认为所以区域都按照此值布置。若无设置此属性，则按默认值拉伸(stretch)来布置image。
所以对应上图，咱们再来一个例子，就一目了然了：
回到上节的那个例子，这回我们只需要两张图片：
和
可以看出后面那种图就是左右两侧拼接而成的，这回咱们用border-image属性完成上面的同样效果，很简单，直接看CSS代码：
评论