mask-border

構成屬性

此屬性是以下 CSS 屬性的簡寫：

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

語法

/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/* Global values */
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: revert-layer;
mask-border: unset;

值

<'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。

正式定義

正式語法

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

<mask-border-source> = 
  none     |
  <image>  

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

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

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

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

示例

設定基於點陣圖的蒙版邊框

在此示例中，我們將用菱形圖案遮罩元素的邊框。蒙版的來源是一個 90 乘 90 畫素的“.png”檔案，其中包含三個垂直和水平排列的菱形。

為了匹配單個菱形的尺寸，我們將使用 90 除以 3，即 30，作為將影像切割成角和邊緣區域的值。round 的重複值將使蒙版切片均勻分佈，即沒有裁剪或間隙。

<div class="masked">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

.masked {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  -webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /          /* slice */
    20px /             /* width */
    1px                /* outset */
    round;             /* repeat */

  mask-border:
    url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}

規範

瀏覽器相容性

另見

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width