3.3 CSS3图片边框属性
border-image效果在CSS2中，只有使用背景图片来制作，而且制作过程非常复杂，做完后也很难维护。如今CSS3中增添了一个图片边框的属性，能够模拟出background-image属性的功能，功能比background-image强大，我们可以使用border-image属性给任何元素（ 除border-collapse属性值为collapse的table元素之外）设置图片效果边框，还可以使用这个来制作圆角按钮效果、渐变的Tabs效果等。
3.3.1 border-image属性的语法及参数
为了能更好地学习和理解border-image这个属性，还是从其最基本的语法入手。
border-image: none | <image> [<number> | <percentage>] {1,4} [/ <broder-width> {1,4}] ?[stretch | repeat | round] {0,2}
接下来就给大家说说这些参数的含义与使用方法。
none：默认值，表示边框无背景图片。
<image>：设置背景图片，这跟background-image一样，可以使用绝对或相对的URL地址，来指定边框的背景图片。
<number>：number 是一个数值，用来设置边框或者边框背景图片的大小，其单位是像素（px），可以使用1～4个值，表示4个方位的值，大家可以参考border-width 设置方式。
<percentage>：percentage也是用来设置边框或者边框背景图片的大小，跟number不同之处是，percentage使用的是百分比。
stretch、repeat、round：这三个属性参数是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch会拉伸边框背景图片、repeat是会重复边框背景图片、round是平铺边框背景图片，其中stretch为默认值。
border-image和background-image之间有一些类似之处，包括图片的引用和排列方式等。
3.3.2 border-image属性使用方法
为了更好地理解，暂时把border-image在语法的表达形式进行属性的分解阐述（实际应用中是不能分解的，此处只是用来帮助大家更好地理解border-image属性）。
引入背景图片：border-image-source。
切割引入背景图片：border-image-slice。
边框图片的宽度：border-image-width。
边框背景图片的排列方式：border-image-repeat。
接下来重点学习border-image拆分出来的四个属性。
1．border-image-source
语法：
border-image-source: url(image url);
/*image url可是以边框图片的相对地址，也可以是绝对地址*/
border-image-source跟CSS2中的background-image属性相似，也是通过url()来调用背景图片，图片的路径可以是相对地址，也可以是绝对地址，当然不想使用背景图片也可以设置为“border-image:none”；其默认值就是none。
2．border-image-slice
语法：
border-image-slice:[<number> | <percentage>] {1,4} && fill ?
border-image-slice是用来分解引入进来的背景图片，这个参数相对来说比较复杂和特别，主要表现在以下几点。
1）取值支持<number> | <percentage>。其中number是没有单位的，因为其默认的单位就是像素。除了直接用number 来设置外，还可以使用百分比值来表示，即相对于边框背景图片而言的，例如边框图片的大小是300px×240px，取百分比为25%，30%，15%，20%，它们实际对应的效果就是剪切了图片的60px，90px，36px，60px的四边大小，如图3-4所示。
border-image-slice中的number或者percentage都可以取1～4个值，这个类似于CSS2 中的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一样重新布置。
来看一个示例，其剪切的效果如图3-5所示。
对应的代码如下所示。
div {
border: 12px double green;
-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分别切了一刀，这样一来就把背景图切成了九个部分，称为“九宫格”。“九宫图”在本文专指由九个方格形成的矩形布局图，正如图3-5所示。这样就应用这个“九宫格”来帮助我们了解border-image的绘制原理。图3-6是来自W3C官网的border-image背景图，也是一张重要的示意图，因为这张图刚好具有我们所说的“九宫格”（27x3）x(27x3)。
图3-6 九宫格示意图
图3-6中，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，则上面所说的九部分正好如图3-7所示的对应位置。
图3-7 九宫图对应区域
图3-7所示的右边图片中，border-top-right-image，border-bottom-right-image，border-bottom-left-image，border-top-left-image四个边角部分，在border-image中是没有任何展示效果的，把这四个部分（图3-7中对应的2、4、6、8部分）称做盲区；而对应的border-top-image、border-right-image、border-bottom-image、border-left-image四个区域在border-image中是属于展示效果区域（图3-7中对应的1、3、7、9区域）。
其中上下区域border-top-image和border-bottom-image区域受到水平方向效果影响。如果是repeat则此区域图片会水平重复；如果是round则会水平平铺；如果是stretch则被水平拉伸，针对这个我们使用案例演示背景图片剪切的方法以及其对应的效果。
假设有一个元素边框背景定义了一个背景图片为border.png，然后分别距离边框背景图片顶边（top）、右边（right）、底边(bottom)和左边（left）的27px处切一刀，此时border-image-slice的属性值为(27,27,27,27)，由于四边的值相同，该属性可以简写为border-image-slice:27。接下来来看几种不同的切片处理效果。
（1）水平效果
1）水平round效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>border-image的水平round效果</title>
<style type="text/css">
.border-image {
width: 150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(border.png) 27 round stretch;
-moz-border-image: url(border.png) 27 round stretch;
-o-border-image: url(border.png) 27 round stretch;
-ms-border-image: url(border.png) 27 round stretch;
border-image: url(border.png) 27 round stretch;
}
</style>
</head>
<body>
<div class="border-image"></div>
</body>
</html>
对应的效果如图3-8所示。
2）水平repeat效果。
.border-image {
width: 150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(border.png) 27 repeat stretch;
-moz-border-image: url(border.png) 27 repeat stretch;
-o-border-imag`e: url(border.png) 27 repeat stretch;
-ms-border-image: url(border.png) 27 repeat stretch;
border-image: url(border.png) 27 repeat stretch;
}
对应的效果如图3-9所示。
图3-9 各浏览器下水平repeat演示效果
3）水平stretch效果。
.border-image {
width: 150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(border.png) 27 stretch stretch;
-moz-border-image: url(border.png) 27 stretch stretch;
-o-border-image: url(border.png) 27 stretch stretch;
-ms-border-image: url(border.png) 27 stretch stretch;
border-image: url(border.png) 27 stretch stretch;
}
对应的效果如图3-10所示。
图3-10 各浏览器下水平stretch演示效果
以上分别演示了border-top-image、border-bottom-image的round、repeat和stretch三种效果，从各浏览器下的效果对比图，很容易看出border-image在各浏览器下渲染的效果并不一致。在此，只想通过这几个效果来告诉大家border-top-image和border-bottom-image作用方向，以及对应的round、repeat和stretch各自会产生何种效果。
（2）垂直效果
通过前面学习，了解了border-top-image和border-bottom-image作用区域仅在水平方向，并不会影响垂直方向的效果。由此可以想象，border-right-image和border-left-image，只会作用在垂直方向，而且其同样具有round、repeat、stretch三种效果。接下来为了验证我们的猜想，一起看看border-image垂直方向的作用效果。
1）垂直round效果。
.border-image {
width: 150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(border.png) 27 stretch round;
-moz-border-image: url(border.png) 27 stretch round;
-o-border-image: url(border.png) 27 stretch round;
-ms-border-image: url(border.png) 27 stretch round;
border-image: url(border.png) 27 stretch round;
}
对应的效果如图3-11所示。
图3-11 各浏览器下垂直round的演示效果
2）垂直repeat效果。
.border-image {
width: 150px;
height: 100px;
border: 27px solid;
-webkit-border-image: url(border.png) 27 stretch repeat;
-moz-border-image: url(border.png) 27 stretch repeat;
-o-border-image: url(border.png) 27 stretch repeat;
-ms-border-image: url(border.png) 27 stretch repeat;
border-image: url(border.png) 27 stretch repeat;
}
对应的效果如图3-12所示。
图3-12 各浏览器下垂直 repeat的演示效果
其实在演示水平stretch效果时也设置了垂直方向的stretch，前面已说过，border-image-repeat的默认值是stretch，因此就算不设置任何值，都将用stretch来渲染，具体效果如图3-10所示。
通过上面几个示例比较，repeat属性是边框中间向两端不断平铺，在平铺的过程中保持边框背景图片切片的大小，这样就造成了图示中的两端边缘处有被切的现象。而round却会对边框背景图的切片进行压缩（或伸缩）来适应边框宽度大小，进行排列，使其正好显示在区域内。stretch有点特殊，只会把相应的切片进行拉伸，适应边框大小。
注
意 在Webkit内核的浏览器下（Chrome、Safari），repeat和round两者效果无区别。
3．border-image-width
语法：
boder-image-width: [<length> | <percentage> | <number> | auto] {1,4}
用来设置边框背景图片的显示大小，其实也可以理解为border-width。虽然W3C定义了border-image-width属性，但各浏览器还是将其视为border-width来用，也就是说它和border-width的使用方法是一样的。
4．border-image-repeat
语法：
border-image-repeat: [stretch | repeat | round] {1,2}
用来指定边框背景图片的排列方式，其默认值为stretch。这个属性设置参数和其他的不一样，border-image-repeat不遵循top、right 、bottom、left的方位原则，它只接受两个（或一个）参数值，第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式。当只取一个值时，表示水平和垂直方向的排列方式相同。如果你不显式设置任何值时，水平和垂直都会以其默认值stretch方式来进行排列。
为了能让大家更好地理解border-image-repeat的使用，下面将结合border-image-slice一起来看看round、repeat和stretch的实现原理。
在上面的示例中，使用一个81px×81px的背景图片border.png，分别在背景图片的顶边、右边、底边和左边的第27px处切了四刀，分成九个部分，每个方块的高和宽都是27px×27px。其中有四个部分是盲区，不管什么排列方式，这四个区都不变（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只是在垂直方向进行排列；最后中间部分同时在水平和垂直方向平铺，如图3-13
所示。
前面把border-image像background一样分解介绍了其相关知识点，但在实际应用中，border-image各属性必须写在一起，不能分解。下面给大家提供一个正确的速记法。
border-image:<border-image-source> || <border-image-slice> [/<border-image-width> ] || <border-image-repeat>
3.3.3 浏览器兼容性
border-image是CSS3新增的核心属性之一，也是一个非常实用的属性。随着主流浏览器的全面支持，这个属性会更实用。目前使用border-image属性，还是需要带上浏览器的私有属性，如表3-4所示。
表3-4 各浏览器对border-image的私有属性
Mozilla Gecko Webkit Presto Konqueror Internet Explorer
border-image -moz- -webkit- -o- -khtml- -ms-
目前IE系列并不支持，也没有定义-ms-border-image的私有属性，其他各主流浏览器的支持情况如表3-5所示。
表3-5 border-image的浏览器兼容性
属性名
border-image × 3.5 +√ 3.0 +√ 10.5 +√ 1.0 +√
3.3.4 border-image属性的优势
border-image功能强大，但受限于浏览器的支持度，其使用还是受到很大的限制。但相信这个功能将会在未来的Web应用中得到广泛的运用，尽展个人的魅力。
以前，给某个元素添加图片边框效果，唯一的办法就是使用背景图片。如果知道元素的尺寸会简单点，使用滑动门技术就可以实现，如果元素的尺寸不定，也就是说元素宽度、高度都自适应，单独使用背景图片还很难实现。在这种情况之下就需要添加很多空标签，使用九宫格来填充背景。使用border-image就轻松多了，只需要一张背景图片可以让某个元素实现图片边框的效果，或者其他效果，如圆角效果、阴影效果等。这样大大提高了开发效率，降低了开发成本。
3.3.5 实战体验：按钮圆角阴影效果
border-image是CSS3中很实用的属性，接下来通过几个小案例帮助读者拓展自己的设计灵感，在实际中灵活运用这个属性。
制作按钮有很多种方法，但制作自适应宽度的圆角按钮还是很头痛的。早期使用四个圆角分别定位到按钮的四个角，接着有人使用一张圆角背景图片，通过滑动门技术来制作圆角按钮。随着border-radius的出现，很多情况下使用这个属性制作圆角按钮。本节介绍用border-image制作按钮的案例。
首先需要一张图片，当做border-image的背景图片，如图3-14所示。
接下来一起来看案例的实现代码。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3的border-image制作按钮</title>
<style type="text/css">
.border-image-btn {
display: inline-block;
border: 18px solid green;
border-width: 0 18px;
border-image: url("button_sprite.png") 0 18 50 18;
-webkit-border-image: url("button_sprite.png") 0 18 50 18;
-moz-border-image: url("button_sprite.png") 0 18 50 18;
-o-border-image: url("button_sprite.png") 0 18 50 18;
-ms-border-image: url("button_sprite.png") 0 18 50 18;
padding: 13px 10px 17px;
font-size: 16px;
color: #fff;
font-weight: bold;
text-decoration:none;
line-height: 15px;
margin: 10px;
}
.border-image-btn:hover {
border-image: url("button_sprite.png") 50 18 0 18;
-webkit-border-image: url("button_sprite.png") 50 18 0 18;
-moz-border-image: url("button_sprite.png") 50 18 0 18;
-o-border-image: url("button_sprite.png") 50 18 0 18;
-ms-border-image: url("button_sprite.png") 50 18 0 18;
color: #000;
border-color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="border-image-btn">Click Me!</a>
<a href="#" class="border-image-btn">用力点击我吧！</a>
<a href="#" class="border-image-btn">CSS3 Border-image Button</a>
</body>
</html>
各浏览器下border-image制作按钮效果如图3-15所示。
从图3-15所示的效果中可以看出，border-image在现代浏览器下得到较好的支持，唯有IE 系列不支持（希望IE 10能支持）。接下来简单说一下原理。
这个简单的案例中，首先采用了一张40px×100px的图片精灵（如图3-14所示）作为元素的边框背景图像，然后在距图片顶边0px处切第一刀，在距图片右边18px处切第二刀，在距图片底边50px处切第三刀，在距图片左边18px处切第四刀，从而组成九宫格。接下来利用border-image 的拉伸属性，实现border-image制作按钮的默认效果。按钮悬浮状态下，采用相同的办法，只是改变切片的位置来达到一样的效果。这里还有关键一步，按钮的边框宽度只有左右，如果上下也要设置边框宽度，上面的切图就无法达到所需的效果。感兴趣的同学不妨一试。
注
意 在Chrome浏览器下border-image的标准写法写在最后，会造成不可预计的错误效果。
使用border-image除了可以制作上面的按钮效果之外，还可以制作tabs效果，其原理是一样的，此处不再做过多的重复阐述。但有一个关键处就是border-image的背景图片源要制作好，这里采用的背景图像如图3-16所示。
一起看看示例代码。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3的border-image制作tabs效果</title>
<style type="text/css">
.tabs-box {
border-bottom: 3px solid #9eaab6;
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1;
}
.tabs-box li {
float: left;
display: inline;
margin: 0 12px 0 0;
list-style: none outside none;
border: 1px solid #9EAAB6;
padding: 5px;
border-image: url("border-image-tab.png") 0 5 0 5;
-moz-border-image: url("border-image-tab.png") 0 5 0 5;
-webkit-border-image: url("border-image-tab.png") 0 5 0 5;
-o-border-image: url("border-image-tab.png") 0 5 0 5;
-ms-border-image: url("border-image-tab.png") 0 5 0 5;
border-width: 0 5px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
color: rgba(0, 125, 200, 0.3);
}
</style>
</head>
<body>
<ul class="tabs-box">
<li>Home</li>
<li>CSS3</li>
<li>Html5</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>
示例效果如图3-17所示。
使用border-image制作tabs效果是不是比滑动制作要方便快捷。不过使用border-image制作需要掌握三点：1）源图片制作恰当；2）动刀切边框背景图片合理；3）边框宽度配合到位。
比如此例的切图如图3-18所示。
接下来看使用border-image制作圆角与阴影的示例。和前面两个示例一样，需要制作好的边框背景图，如图3-19所示。
图3-18 border-image切图
图3-19 制作圆角和阴影的边框单背景图
示例代码如下。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3的border-image制作圆角和阴影效果</title>
<style type="text/css">
.border-image-drop-boxshadow {
width: 150px;
height: 50px;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-width: 7px 7px 16px;
border-image: url("border-image-box-shadow.png") 7 7 16 7;
-moz-border-image: url("border-image-box-shadow.png") 7 7 16 7;
-webkit-border-image: url("border-image-box-shadow.png") 7 7 16 7;
-o-border-image: url("border-image-box-shadow.png") 7 7 16 7;
-ms-border-image: url("border-image-box-shadow.png") 7 7 16 7;
}
.box2{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="border-image-drop-boxshadow box1">小框</div>
<div class="border-image-drop-boxshadow box2">大框</div>
</body>
</html>
效果如图3-20所示。
图3-20 各浏览器下border-image制作圆角与阴影效果
以上几个案例可以体现border-image在实际应用中非常灵活，可以根据不同需求设计不同的边框背景图，设置不同border-image-slice属性值，从而设计各种各样的特殊边框样式，如带有纹理的相框、带有花边的边框等，大家不妨亲自体验一下。
