CSS 遮罩 - mask-border 屬性

mask-border CSS 屬性幫助你建立沿著元素邊框邊緣的遮罩。

CSS 屬性mask-border 是一個簡寫屬性，對應於下面描述的多個詳細屬性。

可能的取值

CSS 屬性mask-border 可以包含以下值之一：

<'mask-border-source'>: 確定源影像。詳情請參考 mask-border-source。
<'mask-border-slice'>: 指定將源影像切分為不同區域所需的尺寸。最多可以指定四個值。詳情請參考 mask-border-slice。
<'mask-border-width'>: 確定邊框遮罩的寬度。最多可以指定四個值。詳情請參考 mask-border-width。
<'mask-border-outset'>: 確定邊框遮罩與元素外邊緣之間的距離。最多可以指定四個值。詳情請參考 mask-border-outset。
<'mask-border-repeat'>: 指定調整源影像邊緣以適應邊框遮罩尺寸的方式。最多可以指定兩個值。詳情請參考 mask-border-repeat。
<'mask-border-mode'>: 確定源影像是否應被視為亮度遮罩或 Alpha 遮罩。最多可以指定四個值。詳情請參考 mask-border-mode。

應用於

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

語法

mask-border = <'mask-border-source'> || 
    <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
    <'mask-border-repeat'> || 
    <'mask-border-mode'>

CSS mask-border - 基本示例

以下示例演示了 CSS 屬性mask-border 的用法，其中一個影像作為遮罩源影像傳遞，其他詳細屬性值也已傳遞。

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

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

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

CSS mask-border - 相關屬性

下表列出了傳遞給mask-border 屬性的各種詳細屬性。

屬性	描述
mask-border-mode	確定源影像是否應被視為亮度遮罩或 Alpha 遮罩。
mask-border-outset	確定邊框遮罩與元素外邊緣之間的距離。
mask-border-repeat	指定調整源影像邊緣以適應邊框遮罩尺寸的方式。
mask-border-slice	指定將源影像切分為不同區域所需的尺寸。
mask-border-source	確定源影像。
mask-border-width	確定邊框遮罩的寬度。

列印頁面