MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

border-image-slice 属性会通过规范将 border-image-source  的图片明确的分割为9个区域:四个角,四边以及中心区域。这个将会通过指定的四个内向距离来实现。

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties四个值来控制切片线的位置。如果没有特定的指明,它们的值将会从其他的值通过 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.
是否是继承属性
Percentagesrefer 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 typediscrete
正规顺序the percentages or lengths, eventually followed by the keyword fill

语法

/* 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;

slice
Is a <number> or a <percentage> of the offset for the four slicing lines. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
horizontal
Is a <number> or a <percentage> of the offset for the two slicing lines corresponding to the horizontal edges, the right and the left ones. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
vertical
Is a <number> or a <percentage> of the offset for the two slicing lines corresponding to the vertical edges, the top and the bottom ones. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
top
Is a <number> or a <percentage> of the offset for the top slicing line. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
bottom
Is a <number> or a <percentage> of the offset for the bottom slicing line. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
right
Is a <number> or a <percentage> of the offset for the right slicing line. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
left
Is a <number> or a <percentage> of the offset for the left slicing line. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
fill
Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

形式语法

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

where
<number-percentage> = <number> | <percentage>

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
border-image-slice
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) 未实现 ? ?

[1] Until Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) SVGs without viewport were not sliced correctly (bug 619500). Starting from Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) they are displayed the same like SVGs with viewport, though if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809). This was fixed in Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), though there's still an issue for SVGs without viewport when e10s is disabled (bug 1290782).

Also, small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).

See also

文档标签和贡献者

 此页面的贡献者: sqchenxiyuan
 最后编辑者: sqchenxiyuan,