CSS 遮罩 - mask-border-outset 屬性

CSS 屬性 `mask-border-outset` 指定元素的`遮罩邊框` 從邊框盒延伸的距離。

CSS 屬性 `mask-border-outset` 可以指定一個、兩個、三個或四個值。每個值都是一個 `<length>` 或 `<number>`。不允許使用負值，負值將被視為無效。應用值時，請考慮以下規則：

如果指定`一個`值，則相同的偏移量將應用於所有`四個邊`。
如果指定`兩個`值，則第一個偏移量將應用於`頂部和底部`，第二個偏移量將應用於`左側和右側`。
如果指定`三個`值，則第一個偏移量將應用於`頂部`，第二個偏移量將應用於`左側和右側`，第三個值將應用於`底部`。
如果指定`四個`值，則偏移量將按指定的順序（順時針方向）應用於`頂部、右側、底部`和`左側`。

可能的值

CSS 屬性 `mask-border-outset` 可以具有以下值之一：

`<length>`: 遮罩邊框偏移量以長度單位指定。
`<number>`: 遮罩邊框偏移量指定為對應`border-width` 的倍數。

應用於

所有 HTML 元素。對於 SVG，它應用於容器元素，但不包括 `<defs>` 元素和所有圖形元素。

語法

mask-border-outset = [ <length> | <number> ] {1,4}

注意：基於 Chromium 的瀏覽器支援此屬性的舊版本 `mask-box-image-outset`，並帶有字首 `-webkit`。
-webkit-mask-border-outset = 3.5rem;

CSS mask-border-outset - 基本示例

以下示例演示了 CSS 屬性 `mask-border-outset` 的用法，其中一個影像作為遮罩邊框傳遞，並指定了一個偏移值，該值會在影像和遮罩邊框之間新增一個距離。

<html>
<head>
<style>
   * {
      box-sizing: border-box;
   }

   .with-mask{
      -webkit-mask-box-image-source: url("images/border.png");
      -webkit-mask-box-image-slice: 80;
      -webkit-mask-box-image-width: 120px;  
      -webkit-mask-box-image-repeat: round;
      -webkit-mask-box-image-outset: 3.5rem;

      -webkit-mask-border-source: url("images/border.png");
      -webkit-mask-border-slice: 80;
      -webkit-mask-border-width: 120px;
      -webkit-mask-border-outset: 3.5rem; 
      -webkit-mask-border-repeat: round;
      -webkit-mask-border-mode: alpha;
   }
</style>
</head>
<body>
   <h1>The mask-border-outset Property</h1>

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

列印頁面