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>
