今天小海前端（头条号）为大家讲解一个CSS3新增的边框图像属性。这个属性是为容器的边框来增加图像的。该属性的兼容性暂时还不是特别好，建议大家使用火狐浏览器来尝试该属性的各个效果。
承接文章：在Web页面实现圆角效果，CSS3帮你轻松实现，一个人人皆知的属性
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
本节涉及到的CSS3属性为：
border-image
border-image-source
border-image-slice
border-image-width
border-image-repeat
border-image-outset
一、图像边框的属性：
要想实现图像的边框，需要用到上面提到的六个属性。这六个属性只有border-image属性和border-image-outset可以直接在代码中使用，剩下的四个属性是border-image属性的派生属性，用在border-image属性的格式中。
border-image属性的格式如下所示：
border-image:border-image-source
border-image-slice/
border-image-width
border-image-repeat
接下来我们对其中的每一个派生属性来进行介绍。
二、加载图像源属性：
border-image-source属性用于指定边框图像加载的图像路径和文件名，取值格式为：
border-image-source:url(image_URL);
三、图像切片属性：
border-image-slice属性用于指定一张图片是如何分割为多个部分，并放置在块级元素边框的各个组成部分的。该属性的取值为四个方向的像素值，并且规定不允许带有单位。
首先，我们选择下面这张图片作为边框图片的内容。这张图片存放在一个名为images的文件夹中，文件名为ball.jpg，图片的宽度和高度均为90像素。图片中的每一个圆形的直径均为30像素。
素材图片
border-image-slice属性就是用来设置上下左右四个方向向内切分图像的宽度。我们大家一块看下张图片。
切分图片示意图
可以看出，如果四个方向均向内切分30像素的大小，由于这些圆的直径为30像素，那么这些切分线就将这张图片划分为了9个组成部分。这9个组成部分正好是图片中编号的9个组成部分。
这样，这张图片的九个部分就会分布在边框的以下几个位置：
1号圆形分布在边框的左上角。
2号圆形分布在边框的上方。
3号圆形分布在边框的右上角。
4号圆形分布在边框的左侧。
5号圆形CSS将其分布在容器的内部。
6号圆形分布在边框的右侧。
7号圆形分布在边框的左下角。
8号圆形分布在边框的下方。
9号圆形分布在边框的右下角。
最后将图像边框的宽度也设置为30像素，这个图像边框就能够显示出来了。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30/30px;
最终的显示效果为：
代码效果示意图
四、图片边框的平铺效果：
我们可以从效果图中看出，在四个边上的图片都是拉伸的，这是由于border-image-repeat属性的取值默认是stretch，意思是“拉伸”，该属性还可以取值为repeat（平铺）、round（精确平铺）。我们将这个效果取值为round，再看一看边框效果。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30/30px round;
最终的显示效果为：
代码效果示意图
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
文章预告
下一篇文章中，小海前端（头条号）会为小伙伴们继续介绍border-image属性的详细用法。希望正在学习CSS3技术的小伙伴们继续关注。