mask-border

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

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

<'mask-border-source'>

Das Quellbild. Siehe mask-border-source.

<'mask-border-slice'>

Die Dimensionen zum Aufteilen des Quellbildes in Regionen. Es können bis zu vier Werte angegeben werden. Siehe mask-border-slice.

<'mask-border-width'>

Die Breite der Randmaske. Es können bis zu vier Werte angegeben werden. Siehe mask-border-width.

<'mask-border-outset'>

Der Abstand der Randmaske von der Außenseite des Elements. Es können bis zu vier Werte angegeben werden. Siehe mask-border-outset.

<'mask-border-repeat'>

Definiert, wie die Randregionen des Quellbildes an die Dimensionen der Randmaske angepasst werden. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.

<'mask-border-mode'>

Legt fest, ob das Quellbild als Luminanzmaske oder Alphamaske behandelt wird. Siehe 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>       |
  <gradient>  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

In diesem Beispiel werden wir die Grenze eines Elements mit einem Rautenmuster maskieren. Die Quelle für die Maske ist eine ".png"-Datei mit 90 x 90 Pixeln, wobei drei Rauten vertikal und horizontal verlaufen:

Um die Größe einer einzelnen Raute anzupassen, verwenden wir einen Wert von 90 geteilt durch 3, also 30, um das Bild in Eck- und Randregionen zu unterteilen. Ein Wiederholungswert von round sorgt dafür, dass die Maskenschnitte gleichmäßig passen, d.h. ohne Abschneiden oder Lücken.

<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