CSS Masking - mask-border-width 属性_CSS 菜鸟教程

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>

<< CSS Masking - mask-border 属性 CSS Masking - mask-border-source 属性 >>