我的作风：首先给大家作自我介绍
hello，大家好，我叫小黑，也叫xiaoho，目前喜欢并从事写页面。因为不喜欢在那些类似BBS型的论坛上发帖，所以之前在 html-js 上发表几篇戳文，现在申请了前端观察打字员，在这里谢谢神飞童鞋，虽然我不懂他是干嘛的~不过为什么选择在这里发表文章的缘由就是下面这句话：
向来中国的前端开发领域，就像一盘散沙一样，每个人每个站都各自为营，高手就像就像天空的星星一样多，但是他们的成就却很少广为传播，初学者却苦于在大海一样的设计中寻找自己的参考。
我非圣人，我只是把我自己所学所想的表达出来，毕竟个人想法有限，假如有悖论或者冒犯之处，还请拍砖，大家一起在争论中提高。还有，也许你们可能也会奇怪，为什么网上有这么一大把的学习的文章，类似的文章还要自己写出来，我的个人想法是：只有自己亲自去实践过才有发言权。 那么问题来了：怎么对我的言语进行反驳呢？在评论中猛戳！
前言
对于这个border-image属性已经不是什么新奇的事情了，也是一个老生长谈的话题。这是属性从很多年前已经出现了，但一直形单影只的，似乎不被看好，但是假如你对此深入研究之，想必其用处还是多多，不过很可惜到目前为止对于浏览器支持还不比其他css3属性多，特别是IE，只有IE11以上才支持，详情请移步 border-image兼容性 。不过很好，对于纯正的现代浏览器和移动浏览器支持度还是非常牛逼哄哄的，所以今天就来详解一下这个属性的各个值。
border-image摘要
其实我[border-image属性]是用来给元素边框添加背景图像，在某些时候，利用这个 border-image 可以轻松绘制一些比较复杂的小部件。并且我是 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 的简写值。只不过为了方便简写，毕竟你懂得，我们家族 border-* 都是有简写值，假如作为新生儿没有，那看的人估计都醉了。
哦，对了，忘记跟你说了，我的作用就是用来代替 border-style 值的。值得注意的是假如 border-image 值是none的话，那么背景图像将不会显示，同时， 将会显示 border-style 的值。 那么我的详细简写值如下所示：
属性名称:
border-image
值:
|| [ / | / ? / ]? ||
初始值:
详见各个属性
应用于:
所有元素，除表单元格 border-collapse 是 collapse外.
是否继承:
否
百分比:
N/A
媒体:
visual
计算值:
详见各个属性
动画:
详见各个属性
所以，我的完整写法是
复制代码代码如下:
.border-image-all{ border:27px solid #000; border-image:url(http://img.xiaoho.com/2014/09/border.png) 27 27 27 27 fill/27 27 27 27/27px 27px 27px 27px repeat;}
如你所见，这正是我的一个简写值。请不要头晕哦，虽然是一长串的各种英文单词，但是你对我恐怕也不陌生哒 QQ表情可爱
，想想css属性当中有哪些是跟图片相关的，反正我是想到了 background 属性值了。css当中引入图像的属性的属性值不外乎有：图片地址 background-image 、图片重复 background-repeat 、图片平铺方式 background-attachment 等。因此对于边框图像也是大同小异滴啦。下面我们就一一分析这些单独的属性值。