mask-border-slice

/* All sides */
mask-border-slice: 30%;

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

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

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

/* Using the `fill` keyword */
mask-border-slice: 10% fill 7 12;

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

该mask-border-slice属性可使用一至四个指定<number-percentage>值来表示每个图像切片的位置。负值无效；大于其相应尺寸的值被钳制为100%。

• 当一个被指定的位置，它在从它们各自的两侧是相同的距离创建所有四片。
• 当2 点被指定的位置，所述第一值创建一个从测量的层的顶部和底部，所述第二创建从所测量的片左右。
• 当指定了三个位置时，第一个值创建从顶部开始测量的切片，第二个值创建从左侧和右侧开始测量的切片，第三个值创建从底部开始测量的切片。
• 当指定了四个位置时，它们创建从上，右，下和左按该顺序（顺时针）测量的切片。

fill如果使用了可选值，则可以将其放置在声明中的任何位置。

<number>

表示光栅图像的边缘偏移量（像素）和矢量图像的坐标。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，通常最好使用百分比。

<percentage>

将边缘偏移量表示为源图像尺寸的百分比：水平偏移量的图像宽度，垂直偏移量的高度。

fill

保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。

切片过程总共创建了九个区域：四个角，四个边缘和一个中间区域。四个切片线，从其各自的侧面设置了给定的距离，以控制区域的大小。

上图说明了每个区域的位置。

• 1-4 区是 拐角区域 。每个图像都使用一次以形成最终边框图像的角。
• 5-8 区是 边缘区域 。在最终的边框图像中对这些元素进行重复，缩放或其他方式的修改，以匹配元素的尺寸。
• 9 区是 中间区域 。默认情况下将其丢弃，但如果fill设置了关键字，则它会用作背景图像。

mask-border-repeat，mask-border-width和mask-border-outset (en-US)属性决定了这些区域用于形成最终的蒙版边框。

mask-border-slice = 
  [ <number> | <percentage> ]{1,4} fill?  

该属性似乎在任何地方都不受支持。最终开始受支持时，它将用于定义从源图像获取的切片的大小，并用于创建边框蒙版。

mask-border-slice: 30 fill;

基于 Chromium 的浏览器支持此属性的过时版本mask-box-image-slice-带前缀：

-webkit-mask-box-image-slice: 30 fill;

• 1 到 4 值语法的图解说明