边框图像使用范围 | border-image-slice
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可以覆盖这个属性的默认值。
| 初始值 | 100% |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| Percentages | refer to the size of the border image |
| 适用媒体 | visual |
| 计算值 | one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified |
| Animation type | discrete |
| 正规顺序 | the percentages or lengths, eventually followed by the keyword fill |
语法
此属性可以采用一、二、三或四个值。
只有一个价值：
- 值是
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>
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-image-slice' in that specification. | Candidate Recommendation | Initial defintion |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 15.0 | (Yes) | 15.0 (15.0)1 | 11 | 15 | 6 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 4.1-webkit | (Yes) | 15.0 (15.0) | No support | ? | ? |
直到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）。
