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 | 确定边框蒙版的宽度。 |
