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>

列印頁面