CSS Masking - mask-border 属性

CSS mask-border 属性可帮助您沿元素边框的边缘创建蒙版。

CSS mask-border 属性是不同 longhand 属性的简写属性，这些属性在下半部分进行了描述。

可能的值

CSS 属性 mask-border 可以列出以下值之一：

<'mask-border-source'>：确定源图像。有关详细信息，请参阅 mask-border-source。
<'mask-border-slice'>：指定将源图像切片到不同区域所需的尺寸。最多可以指定四个值。有关详细信息，请参阅 mask-border-slice。
<'mask-border-width'>：确定边框蒙版的宽度。最多可以指定四个值。有关详细信息，请参阅 mask-border-width。
<'mask-border-outset'>：确定边框蒙版与元素外边缘之间的距离。最多可以指定四个值。有关详细信息，请参阅 mask-border-outset。
<'mask-border-repeat'>：指定调整源图像边缘的方式，以适应边框蒙版的尺寸。最多可以指定两个值。有关详细信息，请参阅 mask-border-repeat。
<'mask-border-mode'>：确定是将源图像视为亮度蒙版还是 Alpha 蒙版。最多可以指定四个值。有关详细信息，请参阅 mask-border-mode。

适用于

所有 HTML 元素。如果是 SVG，它适用于容器元素，不包括 <defs> 元素和所有图形元素

语法


mask-border = <'mask-border-source'> ||	
	 	 <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
	 	 <'mask-border-repeat'> ||	
	 	 <'mask-border-mode'>

CSS mask-border - 基本示例

以下示例演示了如何使用 CSS 属性 mask-border，其中图像将作为掩码源图像传递，并传递其他 longhand 属性值：


<html>
<head>
<style>
	 	.with-mask {
	 	 	 -webkit-mask-box-image: url("images/logo.png")
	 	 	 	 	20 fill / 	 	 	 	 	/* slice */
	 	 	 	 	10px / 	 	 	 	 	 	 /* width */
	 	 	 	 	2px 	 	 	 	 	 	 	 	/* outset */
	 	 	 	 	round; 	 	 	 	 	 	 /* repeat */
	 	
	 	 	 mask-border: url("images/logo.png")
	 	 	 	 	20 fill / 	 	 	 	/* slice */
	 	 	 	 	10px / 	 	 	 	 	 /* width */
	 	 	 	 	2px 	 	 	 	 	 	 	/* outset */
	 	 	 	 	round; 	 	 	 	 	 /* repeat */
	 }
</style>
</head>
<body>
	 	<h1>The mask-border Property</h1>

	 	<h3>With mask-border</h3>
	 	<div class="with-mask">
	 	<img src="images/border.png" alt="mask border image" width="300" height="200">
	 	</div>

	 	<h3>Without mask-border</h3>
	 	<img src="images/border.png" alt="mask border image" width="300" height="200">
</body>
</html>

CSS mask-border - 相关属性

下表列出了传递给 mask-border 属性的各种 longhand 属性：

属性	描述
mask-border-mode	确定是将源图像视为亮度蒙版还是 Alpha 蒙版。
mask-border-outset	确定边框蒙版与元素的外边缘之间的距离。
mask-border-repeat	指定调整源图像边缘以适应边框蒙版尺寸的方式。
mask-border-slice	指定将源图像切片到不同区域所需的尺寸。
mask-border-source	确定源图像。
mask-border-width	确定边框蒙版的宽度。

打印本页