CSS mask-border-width 属性设置元素的 蒙版边框 的宽度。
CSS mask-border-width 属性可以指定为一个、两个、三个或四个值。应用值时，将考虑以下规则：
- 如果指定了一个值，则将相同的宽度应用于所有四个边。
- 如果指定了两个值，则第一个宽度将分别应用于顶部和底部，第二个宽度将应用于左侧和右侧。
- 如果指定了三个值，则第一个宽度将分别应用于顶部，第二个宽度将应用于左侧和右侧，第三个宽度将应用于底部。
- 如果指定了四个值，则宽度将按指定的顺序（顺时针）应用于顶部、右侧、底部和左侧。
可能的值
CSS 属性 mask-border-width 可以具有以下值之一：
- <length-percentage>：蒙版边框的宽度指定为 <length> 或 <percentage> 值，其中百分比相对于边框区域的宽度（如果是水平偏移），则百分比是相对于边框区域的高度（如果是垂直偏移）。负值无效。
- <number>：蒙版边框的宽度指定为相应 边框宽度 的倍数。负值无效。
- auto：将对应的 mask-border-slice 的固有宽度或高度设置为蒙版边框的宽度。如果图像没有固有尺寸，则使用相应的 边框宽度。
适用于
所有 HTML 元素。如果是 SVG，它适用于容器元素，不包括 <defs> 元素和所有图形元素
语法
mask-border-width = [<length-percentage>|<number>|auto]{1,4}
注意：基于 chromium 的浏览器支持此属性的旧版本 mask-box-image-width，带有前缀，即 -webkit。
-webkit-mask-border-width = 20px;
CSS mask-border-width - 一个值
以下示例演示如何使用 CSS 属性 mask-border-width，其中图像作为掩码边框传递，并指定宽度值，该值设置所有四个边上的掩码边框的宽度。
<html>
<head>
<style>
.with-mask {
-webkit-mask-box-image-source: url("images/logo.png");
-webkit-mask-box-image-slice: 20 fill; /* slice */
-webkit-mask-box-image-width: 10px; /* width */
-webkit-mask-box-image-outset: 2px; /* outset */
-webkit-mask-box-image-repeat: repeat; /* repeat */
mask-border-source: url("images/logo.png");
mask-border-slice: 20 fill; /* slice */
mask-border-width: 10px; /* width */
mask-border-outset: 2px; /* outset */
mask-border-repeat: repeat; /* repeat */
}
</style>
</head>
<body>
<h1>The mask-border-width Property</h1>
<h3>With mask-border-width</h3>
<div class="with-mask">
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</div>
<h3>Without mask-border-width</h3>
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>
CSS mask-border-width - 两个值
以下示例演示了如何使用 CSS 属性 mask-border-width，其中图像作为掩码边框传递，width传递两个值，将顶部和底部的宽度设置为 10px，将左右两侧的宽度设置为 20px。
<html>
<head>
<style>
.with-mask {
-webkit-mask-box-image-source: url("images/logo.png");
-webkit-mask-box-image-slice: 20 fill; /* slice */
-webkit-mask-box-image-width: 10px 20px; /* width */
-webkit-mask-box-image-outset: 2px; /* outset */
-webkit-mask-box-image-repeat: repeat; /* repeat */
mask-border-source: url("images/logo.png");
mask-border-slice: 20 fill; /* slice */
mask-border-width: 10px 20px; /* width */
mask-border-outset: 2px; /* outset */
mask-border-repeat: repeat; /* repeat */
}
</style>
</head>
<body>
<h1>The mask-border-width Property</h1>
<h3>With mask-border-width</h3>
<div class="with-mask">
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</div>
<h3>Without mask-border-width</h3>
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>
CSS mask-border-width - 三个值
以下示例演示了如何使用 CSS 属性 mask-border-width，其中将图像作为掩码边框传递，并传递三个值作为宽度，这将顶部的宽度设置为 10%，左右两侧的宽度为 20px，底部的宽度为 10%。
<html>
<head>
<style>
.with-mask {
-webkit-mask-box-image-source: url("images/logo.png");
-webkit-mask-box-image-slice: 20 fill; /* slice */
-webkit-mask-box-image-width: 10% 20px 10%; /* width */
-webkit-mask-box-image-outset: 2px; /* outset */
-webkit-mask-box-image-repeat: repeat; /* repeat */
mask-border-source: url("images/logo.png");
mask-border-slice: 20 fill; /* slice */
mask-border-width: 10% 20px 10%; /* width */
mask-border-outset: 2px; /* outset */
mask-border-repeat: repeat; /* repeat */
}
</style>
</head>
<body>
<h1>The mask-border-width Property</h1>
<h3>With mask-border-width</h3>
<div class="with-mask">
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</div>
<h3>Without mask-border-width</h3>
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>
CSS mask-border-width - 四个值
以下示例演示了如何使用 CSS 属性 mask-border-width，其中图像作为掩码边框传递，width 传递四个值，将所有边的宽度设置为 10px。
<html>
<head>
<style>
.with-mask {
-webkit-mask-box-image-source: url("images/logo.png");
-webkit-mask-box-image-slice: 20 fill; /* slice */
-webkit-mask-box-image-width: 10px 10px 10px 10px /* width */
-webkit-mask-box-image-outset: 2px; /* outset */
-webkit-mask-box-image-repeat: repeat; /* repeat */
mask-border-source: url("images/logo.png");
mask-border-slice: 20 fill; /* slice */
mask-border-width: 10px 10px 10px 10px; /* width */
mask-border-outset: 2px; /* outset */
mask-border-repeat: repeat; /* repeat */
}
</style>
</head>
<body>
<h1>The mask-border-width Property</h1>
<h3>With mask-border-width</h3>
<div class="with-mask">
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</div>
<h3>Without mask-border-width</h3>
<img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>
