mask-border-slice - CSS（层叠样式表） 编辑

的CSS属性除以掩模边界源成区域的图像集合。这些区域用于形成元素的遮罩边框的组成部分。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属性决定了这些区域用于形成最终的蒙版边框。

正式定义

形式语法

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

例子

基本用法

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

mask-border-slice: 30 fill;

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

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

注意：该mask-border页面提供了一个有效的示例（使用Chromium支持的过期前缀边框蒙版属性），因此您可以大致了解效果。

注意：如果希望元素的内容可见，则必须包含fill关键字。

技术指标

浏览器兼容性

待定

也可以看看

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