css3中的border-image

作为一个新人小白，打开w3c端详border-image的描述，发现，哦，我的天，看不懂，于是乎有了这篇，主要为了日后帮助忘性极大的自己回忆
例子来源于w3c:
1.http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image
2.http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image_button

1.border-image-source

1. 首先border-image-source很好理解，绘制边框图像的位置（路径）
   需要注意的是div中一定要定义border，不定义border就不会显示图像，border的宽度影响图像的大小

   
   
   

   2016-11-26_135430.png

2.border-image-slice: number|%|fill;

此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。

number：数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）

%：百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度

fill：保留图像的中间部分

这是w3c上的原话，很抽象，反正我是不懂。所以说实践是唯一真理，我们打开浏览器自己试验下
先把border-image-slice设置为 fill 即保留中间图像，方便观察

2016-11-26_141104.png

这需要你自己实验体会才能明白所谓的向内偏倚是什么意思

be careful

** border-image-slice：80 80 80 80 fill的时候 与没有设置border-image-slic的效果相同，而图片的大小恰巧是80*80 **
分离与连接在一起的临界点是40 正好是图片大小80的一半

3.border-image-width: number|%|auto;

**** border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

number：表示相应的border-width 的倍数

%：边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积

auto：如果指定了，宽度是相应的image slice的内在宽度或高度

关键词是倍数，border-image-width限制的是slice的倍数，默认是slice的原大小，若border-image-width：2 则是原大小的2倍

4.border-image-outset: length|number;

2016-11-26_144346.png

改变border-image-outset的值边框会向外扩散

5.border-image-repeat: stretch|repeat|round|initial|inherit;

该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

stretch
默认值。拉伸图像来填充区域

repeat
平铺（repeated）图像来填充区域。

round
类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

space
类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围

initial
将此属性设置为默认值。查看 initial

inherit
从父元素中继承该属性。 查看 inherit