大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏,理解更多前端常识! 点我摸索新世界！
原文链接 ==>http://sylblog.xin/archives/35
前言
前有background-image 为背景增光增彩，后有mask-image 给背景减少可玩性，明天咱们来聊聊border-image，看看他是如何发光发热的！Go!Go!Go!
border-image
首先这个属性是上面个属性的缩写，
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
原理
对于自己来说，这个属性比其余属性来讲是比拟难的,所以先介绍背地的原理。
首先掏出一张大家都在用的图片，是不是霎时感觉很相熟。
为什么这张图这么受大家的欢送呢，我感觉这张图是一个完满的九宫格。没错，九宫格就是原理。
这里咱们假如border-image（或者说是border-image-slice）属性三等分，把图片分成一个九宫格。这张图是8181尺寸的，所以正好是每个菱形占据一个角。尺寸是2727。
同时也会把浏览器元素分成九块,然而并不是平均分的，比方，左上角大小就和borderimage的左上角大小统一，然而上边两头的大小是残余的空间大小，这里就引出了第二个属性，border-image-repeat会决定borderimage两头格子在元素上如何显示，置信看到这里大家对于border-image的原理有大略的理解了。
上面咱们介绍各个属性
border-image-source
border-image的背景图应用url()调用，图片能够是相对路径或是绝对路径，也能够不应用图片，即border-image:none;
这里有个点要留神：如果存在border-image属性并且图片不是none的话，border-style 会生效。
举例
width: 200px; height: 200px; border: 10px solid #000; padding: 20px; border-image: url('./../juejin.png') ;通过图片咱们会发现：
1. 咱们给边框设置的彩色并没有失效。
2. border-image的宽度和border的宽度保持一致。
3. 如果不设置border的宽度，border-image也就没有宽度，即便你设置了border-image-width:也是没有作用的。（border-image-width上面会介绍，莫急！）
border-image-slice
规定图片剪裁地位
- 没有单位，专指像素。默认单位是像素(px)了。例如：
border-image:urlurl('./../juejin.png') 30 repeat;这里的30就是30像素 - 反对百分比值，百分比值大小事绝对于边框图片而言，假如边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
- 能够接管单值，两个值
上面是集体的了解形式，可能说法不太正确
咱们能够设想有四根线，top right bottom left,这四根线都有一个值：
top间隔boder下面的间隔，right间隔border左边的间隔
bottom间隔border上面的间隔，left间隔border右边的间隔
而后的依据这个值裁剪进去的内容一次对应到元素上
一个值；
border-image-slice: 30%;
一个值：四条线的间隔都是一样的。
两个值
border-image-slice: 10% 30%;
top和bottom是10%
left和right是30%
这里举两个极其的例子border-image-slice: 30% 100%;
border-image-slice: 100% 100%;
效果图是这样子的，这里先不给解释为什么是这样子的成果。等大家看完四个值的例子，这里就很简略了。
三个值
border-image-slice: 30 30% 45;
top是30
left和right是30%
top是45
四个值
width: 200px;height: 200px;border: 10px solid #000;padding: 20px;border-image: url(./border.png);border-image-slice: 10 19 1 12;成果
上面来解析一下这张图是怎么造成的。
首先咱们先来依照border-image-slice: 10 19 1 12;将背景图分解成9宫格。
而后再来合成效果图，同样也是9宫格。
通过两图的比照咱们来阐明是如何对应的。
首先是格子1，border-image裁剪进去的是一个三角形，而后再效果图上是不是也是一个三角形！
而后格子2，border-image裁剪进去的是一个
，效果图上是这样子的，独自拿出来看是不是一样，有人说效果图，显著拉伸了，没错这就得说到另一个属性了 border-image-repeat 属性了！它默认就是拉伸。
，
最显著的就是格子7 ，border-image没有裁剪进去任何图像，效果图上也没有任何货色出现。
fill
亲测这个值再最新版的火狐和谷歌浏览器无奈辨认！！！
border-image-repeat
这个是和background-repeat根本差不多，然而它只有三个值能够用。
反复（repeat）、拉伸（stretch） 铺满（round）
stretch
默认值
repeat
看一下成果，四个角的黄色都缺了一点，亲测在谷歌和火狐浏览器下都是这样子的成果，这是为啥呢？因为repeat是从两头往两端反复的。
round
如图所示浏览器，会主动计算，让图像残缺的显示
然而，在谷歌浏览器还是有缺的！！！！！！
border-image-outset
指定在边框内部绘制 区域 的量。包含上下部和左右局部。如果第四个值被省略，它和第二个是雷同的。如果也省略了第三个，它和第一个是雷同的。如果也省略了第二个，它和第一个是雷同的。不容许border-im-outset领有负值。这里就不赘述了，
这里只辨别两种状况
单纯的数字
如果是单纯的数字的话，实际上的间隔是数字倍的border-width
border: 10px solid #000;border-image-outset: 10 30;*px
border-image-outset: 10px 30px;
这两个能够混在一起写！！！
border-image-width
当指定 一个 值时，它将作用到 四个方向 ；
当指定 两个 值时，它将别离作用到 top/bottom 和 left/right方向 ；
当指定 三个 值时，它将别离作用到 上方、left/right方向、和下方；
当指定 四个 值时，它将别离作用到 上方、右方、下方和左方。
默认值是border-width的宽度
属性值
number 示意相应的border-width 的倍数
border: 10px solid #000; border-image-width: 3 4;% 边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
border-image-width: 30% 10%;
81是图片的尺寸。
*px
border-image-width: 50px 5px;
auto 如果指定了，宽度是相应的image slice的外在宽度或高度
border-image-slice: 27;border-image-width: 3 4;