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

CSS mask-border-source 属性设置用于创建元素的蒙版边框的源图像。

可以使用 CSS mask-border-slice 属性将此源图像划分为不同的区域。

可能的值

CSS 属性 mask-border-source 可以具有以下值：

none：不应用蒙版边框。
<image>：用于蒙版边框的图像的引用。

适用于

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

语法

/* Keyword value */
mask-border-source = none;

/* <image> values */
mask-border-source = url(<image-filename>);
mask-border-source = linear-gradient(to bottom, red, yellow);

注意：基于 Chromium 的浏览器支持此属性的旧版本 mask-box-image-source，带有前缀，即 -webkit。

-webkit-mask-border-source = url(image.png);

CSS mask-border-source - 基本示例

以下示例演示了如何使用 CSS 属性 mask-border-source，其中使用 url（）将图像作为掩码边框传递，url（）将图像作为元素的掩码边框应用。

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

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

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

<< CSS Masking - mask-border-width 属性 CSS Masking - mask-border-slice 属性 >>