CSS Masking - mask-border-slice 属性

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>

打印本页