上一篇文章中，小海前端（头条号）为小伙伴们介绍了CSS3中新增的border-image属性，该属性主要用于为容器的边框添加图片。本篇文章，继续为大家讲解该属性的用法和CSS3中对该属性的一些细节要求。

尚未阅读上一篇文章的小伙伴请先阅读上一篇文章，上一篇文章讲解了border-image属性及其派生属性的基础用法。

承接文章：为容器的边框添加图片，CSS3新增的边框图片属性，一种新颖的用法

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

该组属性的兼容性暂时还不是特别好，建议大家使用火狐浏览器（Firefox）来尝试该属性的各个效果。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本篇文章涉及到的CSS3属性问题：

border-image-slice属性的使用细节

border-outset属性的用法

border-image-width属性和border-width属性的区别

border-image属性和border属性的冲突性

各个浏览器内核的兼容性

一、border-image-slice属性的使用细节：

上一篇文章中讲到，border-image-slice是用来设置边框图片的切片属性的。该属性的取值为一个不带单位的数值，默认单位为像素，但是不用书写px。该属性设置的数值可以将边框图片划分为9个区域，并贴到边框的9个不同位置。

这里还以上一篇文章中宽度和高度均为90像素的图片为例，该图片存放在一个名为images的文件夹中，图片的文件名为ball.jpg，图片中每个圆形的直径均为30像素。

素材图 ball.jpg

对于该属性，CSS3对于它的使用方法还有以下几个细节要求：

切片偏移之和与图片宽高的关系

当切片的上下偏移之和大于等于图像的高度，且左右偏移之和大于等于图像的宽度。则容器只有四个角可以获得边框图片的切片，而容器的边无法获得任何图片。

CSS代码如下所示：

border-image:url(../images/ball.jpg) 60 70 50 30/30px round

上述代码指出，上切片尺寸为60像素，右切片尺寸为70像素，下切片尺寸为50像素，左切片尺寸为30像素。上下切片的偏移之和为110像素，左右切片的偏移之和为100像素，这两个值均超过了图片90像素的宽高尺寸。因此只有容器的四个角可以得到边框图像。最终效果如下图所示：

实体效果图

切片偏移量与图片宽高的关系

当切片的上下偏移量都大于等于图像的高度，且左右偏移量都大于等于图像的宽度。则容器的四个角可以获得完整的边框图像。

CSS代码如下所示：

border-image:url(../images/ball.jpg) 90 100 120 130/30px round

上述代码指出，上切片尺寸为90像素，右切片尺寸为100像素，下切片尺寸为120像素，左切片尺寸为130像素。每一个方向的切片偏移量均大于等于图片90像素的宽度和高度值。因此容器的四个角可以获得完整的边框图像。同样，边依然无法得到任何切片图像。

最终效果如下图所示：

实体效果图

边框图片中5号圆形的显示与隐藏

border-image-slice属性还有一个可以放在切片数量后面的取值。当具有该取值并设置为“fill”时，边框图片中5号圆形就会显示在容器的内部。如果没有该取值，边框图片中5号圆形就不会显示在容器内部。

CSS代码如下所示：

border-image:url(../images/ball.jpg) 30 fill/30px round

最终效果如下图所示：

实体效果图

二、border-outset属性的用法：

该属性用来对边框图像实现向外扩张的效果。该属性的取值为带有单位的数值。同时该属性也是可以结合border-image属性单独使用的。

CSS代码如下所示：

border-image:url(../images/ball.jpg) 30/30px round

border-outset:30px;

上述代码会让边框图像在显示的同时向外扩张30像素。请小伙伴们自行操作并尝试。

三、border-image-width属性和border-width属性的区别：

border-width属性可以单独使用，适用于设置具有颜色的边框宽度。

border-image-width属性不可以单独使用，必须在border-image属性取值内部固定的位置处使用。该属性主要用于设置具有图像的边框宽度。

这两个属性是可以同时使用的。

当容器内部具备文本内容时，我们发现，文本内容出现在了边框图片的位置处。为了方便小伙伴们观察，我把文本内容调整成了黄色。如下图的左侧部分。

实体效果图

此时调整border-width属性，为了让边框宽度生效，还需要设置边框样式border-style。为了不让容器的大小发生变化，添加box-sizing属性。为了便于查看，我把文本内容调整成了红色。如上图右侧部分。

CSS代码如下所示：

border-image: url(../images/ball.jpg) 30/30px round;

border-width: 30px;

border-style: solid;

box-sizing: border-box;

color:#ff0000;

四、border-image属性和border属性的冲突性：

CSS3规定，带有颜色的边框和边框图片不得同时存在，并且当border-image属性和border属性同时存在时，border-image是不起作用的。

CSS代码如下所示。

border-image:url(../images/ball.jpg) 30/30px round;

border:solid 10px #ff5857;

上述代码执行后，容器会带有10像素的边框，而不带有边框图片。小伙伴们可以自行尝试。

五、各个浏览器内核的兼容性：

CSS3的属性中还有许多都是浏览器不能完全兼容的，有的属性兼容部分浏览器，有的属性被浏览器部分兼容。那么，要对所有的浏览器都得到相同的外观，应该如何处理呢？

可以采用为CSS属性的兼容性前缀来解决这个问题。

-ms-，适用于具有Trident内核的IE系列浏览器。

-webkit-，适用于具有webkit内核的浏览器，例如Safari浏览器、360安全浏览器等。

-moz-，适用于Firefox浏览器。

-o-，适用于Opera浏览器。

因此，border-image属性要实现浏览器全兼容可以使用下列代码：

border-image:url(../images/ball.jpg) 30/30px round

-webkit-border-image:url(../images/ball.jpg) 30/30px round

-moz-border-image:url(../images/ball.jpg) 30/30px round

-o-border-image:url(../images/ball.jpg) 30/30px round

-ms-border-image:url(../images/ball.jpg) 30/30px round

不过通过实际操作，我发现border-image属性即使加上了浏览器兼容性前缀，也不能达到满意的效果。CSS3中还有许多属性都不能达到最满意的兼容性，我们只能等待CSS3完备的计划出台，并尽快得到大部分浏览器厂商的支持和认可。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

下一篇文章中，小海前端（头条号）会为小伙伴们讲解CSS3中实现多列布局的属性。这组属性解决了在CSS2时必须要对容器进行浮动才能在一行内显示多列的问题。希望小伙伴们不要错误。