CSS mask-border-slice 属性将源图像划分为多个区域。源图像划分的区域对于形成 蒙版边界 的组件非常有用。
CSS mask-border-slice 属性可以指定为 1 到 4 个值。每个值都是一个<number-percentage>。负值是不允许的,并被视为无效,大于其相应尺寸的值将被限制为 100%。应用值时,将考虑以下规则:
- 如果指定了一个值/位置,则将创建与相应边相距相同距离的所有四个切片。
- 如果指定了两个值/位置,则第一个值分别从顶部和底部创建切片,第二个值分别从左侧和右侧创建切片。
- 如果指定了三个值/位置,则第一个值从顶部创建切片,第二个值从左侧和右侧创建切片,第三个值分别从底部创建切片。
- 如果指定了四个值/位置,则它们将按照指定的顺序(顺时针)从顶部、右侧、底部和左侧创建切片。
注意:值填充是可选的,可以在声明中的任何地方使用。
切片过程总共创建了九个区域,即四个角、四个边和一个中间区域。四条切片线负责设置距其相应边的给定距离并控制区域的大小。有关每个区域的位置,请参阅下图:

上图显示了各种区域。
- 区域 1-4 是角落区域。这些区域中的每一个都使用一次,以形成最终边界图像的角。
- 区域 5-8 是边缘区域。这些区域中的每一个都在最终的边框图像中重复、缩放或修改,以匹配元素的尺寸。
- 区域 9 是中间区域。默认情况下,它是分散的,但在应用关键字填充时,它用于设置背景图像。
属性 mask-border-repeat、mask-border-width 和 mask-border-outset 确定如何应用这些区域以形成最终的蒙版边框。
可能的值
CSS 属性 mask-border-slice 可以具有以下值:
- <number>:对于光栅图像,边缘偏移量以像素表示,对于矢量图像,边缘偏移量为坐标。该数字相对于元素的大小,而不是相对于源图像的大小(如果是矢量图像)。因此,在这种情况下,百分比值是首选。
- <percentage>:源图像大小的边缘偏移以百分比值表示;其中,图像的宽度用于水平偏移,图像的高度用于垂直偏移。
- fill:保留中间区域。图像的宽度和高度的大小使其分别与顶部和左侧图像区域匹配。
适用于
所有 HTML 元素。如果是 SVG,它适用于容器元素,不包括 <defs> 元素和所有图形元素
语法
mask-border-slice = [ <number> | <percentage> ] {1,4} fill?
注意:基于 Chromium 的浏览器支持此属性的旧版本 mask-box-image-slice,带有前缀,即 -webkit。
-webkit-mask-border-slice = 20 fill;
CSS mask-border-slice - 基本示例
以下示例演示了如何使用 CSS 属性 mask-border-slice,其中图像作为掩码边框传递,并根据传递的<number-percentage>值进行切片。
<html>
<head>
<style>
.with-mask {
-webkit-mask-box-image: url("images/logo.png")
30 10% / /* slice */
10px / /* width */
2px /* outset */
space; /* repeat */
mask-border: url("images/logo.png")
30 10% / /* slice */
10px / /* width */
2px /* outset */
space; /* repeat */
}
</style>
</head>
<body>
<h1>The mask-border-slice Property</h1>
<h3>With mask-border-slice</h3>
<div class="with-mask">
<img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
</div>
<h3>Without mask-border-slice</h3>
<img src="images/orange-flower.jpg" alt="mask border image" width="300" height="200">
</body>
</html>