边框图像使用范围 | border-image-slice

border-image-slice 属性会通过规范将border-image-source 的图片明确的分割为9个区域：四个角，四边以及中心区域。

/* border-image-slice: slice */
border-image-slice: 30%; 

/* border-image-slice: vertical horizontal */
border-image-slice: 10% 30%;

/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;

/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5; 

/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

这个将会通过指定的四个内向距离来实现。

四个值来控制切片线的位置。如果没有特定的指明，它们的值将会从其他的值通过 4-value syntax of CSS  推断出来。

中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

border-image-repeat,border-image-width,border-image-outset属性则定义这些图片将如何使用。

简写的 CSS 属性 border-image可以覆盖这个属性的默认值。

语法

此属性可以采用一、二、三或四个值。

只有一个价值：

• 值是slice。有两个值：

• 值指定垂直和水平位置。

有三个值：

• 值指定顶，水平，和底部位置。有四个值：

• 值指定顶，右，底部，左边位置。

所述填充值可以放在任何值之间。

值

片是一个<number>或者是<percentage>四条切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...水平是<number>或者是<percentage>与水平边相对应的两条切片线的偏移量，即右侧和左侧的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...垂直是<number>或者是<percentage>对应于垂直边缘、顶部和底部边缘的两条切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...顶部是一个<number>或者是<percentage>顶部切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...底部是<number>或者是<percentage>底部切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...右是<number>或者是<percentage>右边切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...左是<number>或者是<percentage>左边切片线的偏移量。大<number>表示像素对于光栅图像和坐标矢量图像。还有，<percentage>值与图像的高度或宽度有关，以适当的为准。负值无效，大于相关大小、高度或宽度的值夹紧到100%...fill是一个关键字，其存在强制在背景图像上显示中间图像切片，其大小和高度分别调整为上图像切片和左图像切片的大小。inherit是一个关键字，指示所有四个值都是从父元素%27s计算值继承的。

正式语法

<number-percentage>{1,4} && fill?where 
<number-percentage> = <number> | <percentage>

规范

浏览器兼容性

直到Gecko 47.0（Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44）没有视口的SVG无法正确切片（bug 619500）。从Gecko48.0（火狐48.0 / 48.0的Thunderbird / SeaMonkey的2.45）开始，他们都显示同样的SVGs与视口，但如果切片是不完全的50％，他们无法正确的拉伸（错误1264809）。Gecko 49.0（Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46）修复了这个问题，但是当e10s被禁用时（bug 1290782），没有视口的SVG仍然存在问题。

此外，小SVGs会被错误地拉​​伸，因为border-image-slice中的百分比计算为整数而不是浮点数（bug 1284797）。