border-image用于在边框（border）上附加一个背景图片，类似于CSS中的背景（background）属性。例如：background:url(xx.jpg)27pxno-repeat;指图像(url(xx.jpg))、位置(27px)和可重复性(no-repeat)。border-image与此类似，border-image包括图片、裁剪位置（与背景位置相同，也是数值，也支持百分比值）、重复性。例如：border-image:url(border.png)27重复；指图片（url(border.png)）、裁剪位置（27）、重复方法（repeat）。下面我们分解说明border-image的复合写法。border-image的主要参数就是上面说的三个：image，clippingposition，repeatability。其实还有另外两个，文末会讲到。更好理解1.图片(border-image-source)border-image的背景图片是通过url()调用的。图片可以是相对路径也可以是绝对路径，也可以不用图片，即border-image:none；2、图片裁剪位置（border-image-slice）没有单位，默认单位为像素（px）。例如：border-image:url(border.png)27重复；这里的27指的是27px。支持百分比值，百分比值的大小是相对于边框图片的大小。假设边框图片的尺寸为400px*300px，那么20%的实际效果就是将图片的四边裁剪为60px80px60px80px。剪辑属性。类似于CSS中的clip属性。它有1~4个参数，分别代表上、右、下、左四个方向。符合CSS的通用方向规则（与margin、padding等或border-width一致）。举个简单的例子，前面说了支持百分比宽度，所以这里的“30%35%40%30%”可以用下图来表示：从图片顶部30%，从右边35%，底部占40%，左侧占30%。即在画面上进行“四切”，形成九个独立的区域。这就是九宫格，是下面深入讲解border-image的基础。3.重复性（border-image-repeat）值是repeat（重复）只是其中之一，另外两个是round（平铺）和stretch（拉伸）。其中，stretch为默认值。参数有0~2个，0使用默认值-stretch，例如：border-image:url(border.png)30%40%；相当于border-image:url(border.png)30%40%stretchstretch;;1表示水平和垂直方向都使用该参数；如果有2个参数，第一个参数表示水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png)30%40%roundrepeat;表示水平圆形（平铺）并垂直重复（重复）。关于循环和重复之间的区别。round将变圆并填充（适度拉伸）。重复不会拉伸，也不会向上舍入。具体效果见文后示例。4、实际的渲染规则是通过裁剪属性值将边框背景图裁剪成“九方格”模型，那么这个背景图如何对应的粘贴到div的边框上呢？<————————>如border-image所示，四个橙红色的角只会停留在border的四个角上，水平和垂直方向都被拉伸填满四个border角。如图上下区域，border-top-image和border-bottom-image受第一个参数-水平方向效果影响：如果是repeat，则该区域水平重复（roundhorizo??ntaltiling,stretchhorizo??ntalstretching)toFillthecorrespondingupperandlowerborder【这个区域会先在垂直方向根据对应的border-image-width的值按比例缩放，然后在border的水平方向重复ortileorstretch根据参数设置]左右区域border-left-image和border-right-image的效果也是一样的[区域会先根据对应border-image-width中的值按比例缩放水平方向，然后根据参数在边框的垂直方向设置Repeatortilingorstretching]我们用下图(27×3)px*(27×3)pxpng做实验，我加了一个序列号到不同的部分，以便于观察。//添加一个蓝色背景的parent，以便我们分析效果。.border_image{宽度：400px；高度：115px；边框：3em双橙色；-webkit-border-image:url(border.png)27轮；border-image:url(border.png)27轮；}.box{背景：蓝色；}
