尚未阅读上一篇文章的小伙伴请先阅读上一篇文章，上一篇文章讲解了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时必须要对容器进行浮动才能在一行内显示多列的问题。希望小伙伴们不要缺点。
