CSS 遮罩 - mask-border-slice 屬性

CSS 屬性 `mask-border-slice` 將源影像劃分為多個區域。源影像的這些區域劃分對於形成`遮罩邊框` 的元件非常有用。

`mask-border-slice` CSS 屬性可以指定一個到四個值。每個值都是一個`<number-percentage>`。不允許負值，負值被視為無效值，大於其對應維度的值將被限制為`100%`。應用值時，請考慮以下規則：

如果指定`一個`值/位置，則會建立所有四個切片，它們與其對應的邊之間的距離相同。
如果指定`兩個`值/位置，則第一個值建立來自`頂部和底部`的切片，第二個值分別建立來自`左側和右側`的切片。
如果指定`三個`值/位置，則第一個值建立來自`頂部`的切片，第二個值建立來自`左側和右側`的切片，第三個值建立來自`底部`的切片。
如果指定`四個`值/位置，它們將按指定的順序（順時針方向）分別建立來自`頂部、右側、底部`和`左側`的切片。

注意：值`fill` 是可選的，可以在宣告中的任何位置使用。

切片過程總共會建立`九`個區域，即四個`角`、四個`邊`和一個`中間`區域。四條切片線負責設定與其對應邊之間的給定距離，並控制區域的大小。請參考下圖瞭解每個區域的位置。

上圖顯示了各個區域。

`區域 1-4` 是`角`區域。這些區域中的每一個都被使用一次來形成最終邊框影像的角。
`區域 5-8` 是`邊`區域。這些區域中的每一個在最終邊框影像中都會被重複、縮放或修改，以匹配元素的尺寸。
`區域 9` 是`中間`區域。預設情況下，它會被丟棄，但當應用關鍵字`fill` 時，它用於設定背景影像。

屬性`mask-border-repeat、mask-border-width`和`mask-border-outset` 決定了如何應用這些區域來形成最終的遮罩邊框。

可能的值

CSS 屬性`mask-border-slice` 可以具有以下值：

`<number>`：對於光柵影像，邊緣偏移量以畫素表示；對於向量影像，它是座標。對於向量影像，該數字相對於元素的大小，而不是源影像的大小。因此，在這種情況下，最好使用百分比值。
`<percentage>`：源影像大小的邊緣偏移量以百分比值表示；其中影像的寬度用於水平偏移量，影像的高度用於垂直偏移量。
`fill`：保留中間區域。影像的寬度和高度調整為分別匹配頂部和左側影像區域。

應用於

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

語法

mask-border-slice = [ <number> | <percentage> ] {1,4} fill?

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

CSS mask-border-slice - 基本示例

以下示例演示了 CSS 屬性`mask-border-slice` 的用法，其中一個影像作為遮罩邊框傳遞，並根據傳遞的數字百分比值進行切片。

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

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

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

列印頁面