CSS3 图像边框 border-image属性

为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。该属性的优点是，可以根据一些简单的规则，把一幅图像划分为 9 个单独的部分，浏览器会自动使用合适的部分作为边框的对应部分。

需要注意的是，只有当 border-style属性取值为 none 时，border-image属性才会有效。所以，如果定义的边框图像显示不出来，首先需要检查border-style属性的值是否为 none。

border-image是复合属性，其语法格式为：

1. border-image: <‘border-image-source’> ||
2. <‘border-image-slice’> [/<‘border-image-width’>|/<‘border-image-width’>? /<‘border-image-outset’>]? ||
3. <‘border-image-repeat’>

也就是说，border-image属性可以分解为 border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat 这 5 个属性，下面分别进行介绍。

border-image-source

border-image-source属性用于指定边框图像的URL地址，取值为 none | url，默认值为 none。url 可以是相对路径，也可以是绝对路径，跟CSS1中 background-image属性相似。当该属性的取值为 none，或 url 无效时，边框将使用 border-style 属性的值。

border-image-slice

border-image-slice属性的作用是按照指定宽度，对边框图像进行切片。其语法格式为：

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

该属性需要 4 个参数值，依次指定 top、right、bottom、left 这 4 个方向上的切割宽度。其值可以长度，也可以是百分比。长度为纯数字，无需指定单位，默认使用 px 为单位；百分比，top、bottom 相对于边框图像的高度，right、left 相对于边框图像的宽度。4个参数值可以使用简写方式，规则与 border-width 相同。fill 为可选值，用来设置中间的第九块是否为非透明块，默认为透明块。

假设有一个 81px 的正方形图像，包含 9 个菱形图案，每个菱形图案的尺寸为27px * 27px。如图图 4‑5 所示：

图4-5 边框图像

在 border-image-slice: 27 的情况下，4 个方向上的切割宽度均为 27px，切割过程如图 4‑6 所示：

图4-6 边框图像切片过程

从上图可以看出，经过 4 次切割后，边框图像被切成 9 个切片，即左上角（top-left）、右上角（top-right）、右下角（bottom-right）、左下角（bottom-left）4 个橙红色菱形，上（top）、右（right）、下（bottom）、左（left）为 4 个橙黄色菱形，加中间的透明区域。如图 4‑7 所示：

图4-7 边框图像切片的应用

之所以要切成 9 片，是因为盒模型中，一个盒子有内容区域、加上边框的4个角和4条边，正好 9 个区域。

这 9 个切片中，4 个角上的每个切片，将分别用作元素边框的 4 个角、4 条边上的每个切片，将分别用作元素边框的 4 条边、中间的切片用作元素内容区域的背景（如果设置 fill）。

border-image-width

border-image-width属性用来定义边框图像的显示区域，即切片的最大显示宽度。

如果该属性定义的值大于 border-image-slice属性的值，则 4 个角和 4 个边的切片，在水平和垂直方向都会被拉伸到该属性指定的值；如果该属性定义的值小于 border-image-slice属性的值，则使用该属性的值。

如， border-image-slice属性的值为 27，而 border-image-width属性的值为 54px。由于边框宽度大于 border-image-slice属性的值，切片会被拉伸。代码如下：

1. div {
2. width: 300px;
3. height: 120px;
4. border-image-slice: 27;
5. border-image-width: 54px;
6. border-image-source: url(img/border.png);
7. }

上述代码的运行结果如图 4‑8 所示：

图4-8 切片被拉伸

说明：

border-image-width属性定义的是边框图像的显示区域，即切片的最大显示宽度，跟元素的边框宽度没有关系，元素边框的宽度由 border-width属性定义。

所以，当设置的 border-image-width大于边框宽度时，边框图像会对元素自身和周围的元素产生影响。

border-image-outset

border-image-outset属性的作用是让边框图像外凸，延伸到盒子外面。其语法格式为：

1. border-image-outset : [ <length> | <number> ]{1,4}

该属性需要 4 个参数值，依次指定 top、right、bottom、left 这 4 个方向上向外延伸的量，默认值为 0。值可以长度，也可以是数字。长度表示延伸的宽度，数字表示延伸相应边框的 border-width计算值的倍数。4个参数值可以使用简写方式，规则与margin相同。

假设页面上有两个盒子，左边的盒子未指定边框图像外凸，右边的盒子指定边框图像外凸 27px（即一个切片的宽度）：

1. div {
2. width: 128px;
3. height: 128px;
4. border-image-source: url(images/border.png);
5. border-image-slice: 27;
6. border-image-width: 27px;
7. border-image-repeat: repeat;
8. }
9. .outset {
10. border-image-outset: 27px;
11. }

1. <div></div><div class="outset"></div>

上述代码的运行结果如图 4‑9 所示：

图4-9 border-image-outset效果

需要注意的是，边框图像外凸后，就会延伸到盒子的外面。如果外凸的宽度过宽，边框图像可能会覆盖周围的元素。

但是，由于边框图像并不是元素盒模型中的内容，因此，即便边框图像延伸到元素的边界之外，甚至覆盖其它元素，也不会对页面布局产生任何影响。

border-image-repeat

border-image-repeat属性用来定义边框图像的 9 个切片中，top、right、bottom、left对应的 4 个切片是以拉伸方式显示，还是以平铺方式显示。

由于每条边只使用一个切片，所以，当边框的长度大于单个切片的长度时，单个切片就不能填满边框，就需要拉伸或平铺。不同取值的含义见表 4‑2：

表 4‑2 border-image-repeat属性的取值及含义

属性值	含义
stretch	默认值，切片拉伸以填满整个边框区域
repeat	切片重复以填满整个边框区域
round	切片重复以填满整个边框区域。当不能用整数个切片填满整个边框区域时，对每个切片进行缩放，以保证每个切片完整
space	切片重复以填满整个边框区域，当边框区域的尺寸不是切片尺寸的整数倍时，多余的空间由每个切片均分

该属性需要 2 个参数。如果提供 2 个参数，第一个用于 top 和 bottom，第二个用于 left 和 right；如果只提供 1 个参数，则同时用于 top、right、bottom、left。

假设页面上有四个盒子，盒子的宽度和高度分别为 380px 和 118px，即 n 个切片尺寸 + 10px，每个盒子的 border-image-repeat 属性分别取值 stretch、repeat、round、space：

1. div {
2. width: 380px; /* 10个切片的宽度 + 10px */
3. height: 118px; /* 4个切片的高度 + 10px */
4. border-image-slice: 27;
5. border-image-width: 27px;
6. border-image-source: url(img/border.png);
7. }
8. .stretch{
9. border-image-repeat: stretch;
10. }
11. .repeat{
12. border-image-repeat: repeat;
13. }
14. .round{
15. border-image-repeat: round;
16. }
17. .space{
18. border-image-repeat: space;
19. }

1. <div class="stretch">border-image-repeat: stretch</div>
2. <div class="repeat">border-image-repeat: repeat</div>
3. <div class="round">border-image-repeat: round</div>
4. <div class="space">border-image-repeat: space</div>

上述代码的运行结果如图 4‑10 所示：

图4-10 border-image-repeat不同取值的效果

从上图可以看出，当 border-image-repeat属性取值 stretch 时，由于切片不重复，会将单个切片进行拉伸到整个边框的尺寸；当取值 round 时，每个切片保持完整；取其它值时，切片就会进行重复，以填满边框区域。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。