CSS Masking - mask-border-repeat 属性

上一页
下一页

CSS 属性 mask-border-repeat 确定如何调整源图像的边缘以适应元素的蒙版边界的尺寸。

CSS mask-border-repeat 属性可以指定为一个或两个值。应用值时，将考虑以下规则：

  • 如果指定了一个值，则该值将应用于所有四个边。
  • 如果指定了两个值，则第一个值将分别应用于顶部和底部，第二个值将分别应用于左侧和右侧。

可能的值

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

  • stretch：拉伸源图像的边缘以填充每个边界之间的间隙。
  • repeat：源图像的边缘重复（平铺）以填充每个边框之间的间隙。为了正确适应边缘，源图像也可能会被剪裁。
  • round：源图像的边缘重复（平铺）以填充每个边框之间的间隙。为了正确适应边缘，源图像也可能会被拉伸。
  • repeat：源图像的边缘重复（平铺）以填充每个边框之间的间隙。为了正确适应边缘，多余的空间将均匀地分布在瓷砖之间。

适用于

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

语法


mask-border-repeat = [ stretch | repeat | round | space ] {1,2}
注意：基于 chromium 的浏览器支持此属性的旧版本 mask-box-image-repeat，并带有前缀，即 -webkit。

 -webkit-mask-border-repeat = repeat;

CSS mask-border-repeat - 空间值

以下示例演示了 CSS 属性 mask-border-repeat 的使用，其中图像作为蒙版边框传递，重复值被指定为空间，从而在边框之间均匀分布额外的空间，以便调整图块以使其适当适合。


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

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

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

CSS mask-border-repeat - round 值

以下示例演示了如何使用 CSS 属性 mask-border-repeat，其中图像作为蒙版边框传递，重复值指定为圆形，其中图块被拉伸，以便调整图块以使其适当适合。


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

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

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

CSS mask-border-repeat - 拉伸值

以下示例演示了 CSS 属性 mask-border-repeat 的使用，其中图像作为蒙版边框传递，重复值指定为 stretch，其中源图像的边缘被拉伸以达到适当的拟合。


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

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

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

CSS mask-border-repeat - 重复值

以下示例演示了如何使用 CSS 属性 mask-border-repeat，其中图像作为蒙版边框传递，重复值指定为 repeats，其中源图像的边缘被重复，以便为了正确拟合，边缘被剪裁。


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

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

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

 

打印本页
上一页
下一页