深入理解border-image

在CSS3中我认为border-image算是一个比较复杂的属性，虽然平时用到的情况较少，但还是有必要深入学习下。

border-image

border-image用于定义带有背景图片的边框样式，它是以下几个属性的简写：

// 边框图片的路径
border-image-source
// 图片边框的切割位置
border-image-slice
// 图片边框的宽度
border-image-width
// 边框图像超出边框的量
border-image-outset
// 边框图片的平铺方式
border-image-repeat

border-image-source

这个属性很好理解，就是定义图片的url，例如border-image-slice: url('a.jpg')

border-image-slice

这个属性定义边框的裁切位置，先看一个图片:

这个图片的宽高都是81px，每个小菱形的宽高都是27px，我用这张图写了个小demo：
在例1中我定义了slice的值为27，这里千万不要有单位，属性值也可以是百分比，为百分比时是相对于元素的宽高，其实border-image-slice: 27相当于border-image-slice: 27 27 27 27，这四个值什么意思呢。下面上一张图：

第一个27表示在距离元素顶部27px的位置切一刀，第二个27表示在距离右边27px位置切一刀，第三个很显然是在距离元素下边27px的位置切一刀，第四个27表示在距离左部27px的位置切一刀，四个值切四刀，当然四个值是不需要全写的，当你只写第一个时其他三个同第一个，写两个时值一同值三，值二同值四，写三个时值四同值二。四到下去得到了九块区域，其中红色区域时永不会改变的区域，刀的位置决定了四角的大小，但是蓝色区域和内容区是可变的，可以通过border-image-repeat来设置。

border-image-repeat

这个属性决定了图中蓝色区域的展示方式，他的默认值stretch表示拉伸，何为拉伸？拿例1来说，很显然中间的菱形变形了，这就是拉伸的效果。属性值round表示平铺，例2就是平铺的效果，仔细观察发现蓝色小菱形变形了，这是因为边框区域无法刚好显示整数个小菱形，于是就会就变形了。属性repeat表示重复，这个很好理解就是复制复制再复制，显然边框显示了不完整的菱形，但是他们是没有变形的，只是剪断了，而且两边还是均匀的，这是因为复制是从中间开始的，这也是重复和平铺的区别。

border-image-width

定义图片边框的宽度，百分比和数值都可以，表示四个值，例如border-image-width: 10px 20px就相当于border-image-width: 10px 20px 10px 20px，平常习惯于定义border-width，我比较推荐这种写法，用border-image-width和border-width还是有不同的地方的，例4中可以看到那个白色的文字跑到边框上了，这是因为边框也是属于盒子自身的，这不是我想要的效果，另外我在例4中的border-image-width带了单位，如果不带单位就像例5中一样，它是border-width几何倍数。

border-image-outset

我把它叫做边框背景扩散，属性值和border-image-width类似，可以是百分比，可以是像素和数值，当为数值时表示border-width的倍数。例6中我写了个小例子，从例6和例3的对比效果可以很明显观察大，内容区扩散了。

小实战

用下面这张图片写一个小demo：

好处还是很明显的，不受内容区文字个数显示，自动拉伸，发挥想象力可以做出很多奇妙的效果