图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性

2022-05-31 01:01:11

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>

<head>

<title>border-image的水平round效果</title>

.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>

</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>

<head>

<title>CSS3的border-image制作按钮</title>

.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>

<head>

<title>CSS3的border-image制作tabs效果</title>

.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>

<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>

<head>

<title>CSS3的border-image制作圆角和阴影效果</title>

.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>

</body>

</html>

效果如图3-20所示。

图3-20　各浏览器下border-image制作圆角与阴影效果

以上几个案例可以体现border-image在实际应用中非常灵活，可以根据不同需求设计不同的边框背景图，设置不同border-image-slice属性值，从而设计各种各样的特殊边框样式，如带有纹理的相框、带有花边的边框等，大家不妨亲自体验一下。

码农公寓

相关文章