CSS 遮罩 - mask-border-width 屬性

CSS 屬性 mask-border-width 設定元素的 遮罩邊框 寬度。

mask-border-width CSS 屬性可以指定一個、兩個、三個或四個值。應用值時需考慮以下規則

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

可能的值

CSS 屬性 mask-border-width 可以具有以下值之一

<length-percentage>：遮罩邊框的寬度指定為<length> 或<percentage> 值，其中百分比相對於水平偏移量情況下邊框區域的寬度，以及垂直偏移量情況下邊框區域的高度。負值無效。
<number>：遮罩邊框的寬度指定為相應border-width 的倍數。負值無效。
auto：相應mask-border-slice 的固有寬度或高度設定為遮罩邊框的寬度。如果影像沒有固有尺寸，則使用相應的border-width。

應用於

所有 HTML 元素。在 SVG 的情況下，它應用於容器元素，但不包括<defs> 元素和所有圖形元素

語法

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

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

CSS mask-border-width - 一個值

以下示例演示了 CSS 屬性 mask-border-width 的用法，其中將影像作為遮罩邊框傳遞，並指定了一個寬度值，該值設定所有四個邊的遮罩邊框寬度。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 兩個值

以下示例演示了 CSS 屬性 mask-border-width 的用法，其中將影像作為遮罩邊框傳遞，併為寬度傳遞了兩個值，這將頂部和底部的寬度設定為 10px，左側和右側的寬度設定為 20px。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 三個值

以下示例演示了 CSS 屬性 mask-border-width 的用法，其中將影像作為遮罩邊框傳遞，併為寬度傳遞了三個值，這將頂部的寬度設定為 10%，左側和右側的寬度設定為 20px，底部的寬度設定為 10%。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

CSS mask-border-width - 四個值

以下示例演示了 CSS 屬性 mask-border-width 的用法，其中將影像作為遮罩邊框傳遞，併為寬度傳遞了四個值，這將所有邊的寬度設定為 10px。

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

   <h3>With mask-border-width</h3>
   <div class="with-mask">
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
   </div>

   <h3>Without mask-border-width</h3>
   <img src="images/scenery2.jpg" alt="mask border image" width="500" height="300">
</body>
</html>

列印頁面