CSS 遮罩 - mask-border-source 屬性

CSS 屬性 mask-border-source 設定用於建立元素的遮罩邊框 的源影像。

可以使用 mask-border-slice CSS 屬性將此源影像劃分為不同的區域。

可能的值

CSS 屬性 mask-border-source 可以具有以下值

none：不應用遮罩邊框。
<image>：要用於遮罩邊框的影像的引用。

應用於

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

語法

/* Keyword value */
mask-border-source = none;

/* <image> values */
mask-border-source = url(<image-filename>);
mask-border-source = linear-gradient(to bottom, red, yellow);

注意：基於 Chromium 的瀏覽器支援此屬性 mask-box-image-source 的舊版本，並帶有字首，即 -webkit。
-webkit-mask-border-source = url(image.png);

CSS mask-border-source - 基本示例

以下示例演示了 CSS 屬性 mask-border-source 的用法，其中將影像作為遮罩邊框傳遞，使用 url()，並將其應用為元素的遮罩邊框。

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

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

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

列印頁面