作为一个新人小白，打开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
-
首先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
网友评论