border-image 详解

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
<' border-image-source '>： 设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>： 设置或检索对象的边框背景图的分割方式。

border-image-slice：[ <number> | <percentage> ]{1,4} && fill? 默认值：100% 切割线的位置

该属性指定从上，右，下，左方位来分隔图像，将图像分红4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。

<number>： 用浮点数指定宽度。不容许负值。
<percentage>： 用百分比指定宽度。参照其包含块区域进行计算。不容许负值。
fill： 保留裁减后的中间区域，其铺排方式遵循 <' border-image-repeat '> 的设定。

<' border-image-width '>： 设置或检索对象的边框厚度。
border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}
<' border-image-outset '>： 设置或检索对象的边框背景图的扩展。

border-image-outset：[ <length> | <number> ]{1,4} 不容许负值。
该属性用于指定边框图像向外扩展所定义的数值，即若是值为10px，则图像在本来的基础上往外延展10px再显示。
对应的脚本特性为borderImageOutset。

<' border-image-repeat '>： 设置或检索对象的边框图像的平铺方式。默认stretch
border-image-repeat：[ stretch | repeat | round | space ]{1,2}

stretch： 指定用拉伸方式来填充边框背景图。 repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，若是超过则被截断。 round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好能够铺满整个边框。 space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好能够铺满整个边框。 可定义0-2个参数值，即水平和垂直方向。若是2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；若是2个值都为stretch，则可省略不写。