CSS 遮罩 - mask-border-repeat 属性

CSS 属性 mask-border-repeat 确定如何调整源图像的边缘以适合元素的 遮罩边框 尺寸。

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

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

可能的值

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

stretch：源图像的边缘被拉伸以填充每个边框之间的间隙。
repeat：源图像的边缘被重复（平铺）以填充每个边框之间的间隙。为了正确地拟合边缘，源图像也可能会被裁剪。
round：源图像的边缘被重复（平铺）以填充每个边框之间的间隙。为了正确地拟合边缘，源图像也可能会被拉伸。
space：源图像的边缘被重复（平铺）以填充每个边框之间的间隙。为了正确地拟合边缘，额外的空间将均匀地分布在平铺之间。

应用于

所有 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 - space 值

以下示例演示了 CSS 属性 mask-border-repeat 的用法，其中一个图像作为遮罩边框传递，并且 repeat 值被指定为 space，它将额外的空间均匀地分布在边框之间，以调整平铺以获得正确的拟合。

<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 的用法，其中一个图像作为遮罩边框传递，并且 repeat 值被指定为 round，其中平铺被拉伸，以调整平铺以获得正确的拟合。

<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 - stretch 值

以下示例演示了 CSS 属性 mask-border-repeat 的用法，其中一个图像作为遮罩边框传递，并且 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 - repeat 值

以下示例演示了 CSS 属性 mask-border-repeat 的用法，其中一个图像作为遮罩边框传递，并且 repeat 值被指定为 repeat，其中源图像的边缘被重复，以便于正确拟合，边缘会被裁剪。

<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>

打印页面