mask-border

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die mask-border CSS Kurzschreibweise ermöglicht es Ihnen, eine Maske entlang des Randes eines Elements zu erstellen.

Bestanteile

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

Syntax

css

/* 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;

Werte

<'mask-border-source'>: Das Quellbild. Siehe mask-border-source.
<'mask-border-slice'>: Die Abmessungen zum Zerschneiden des Quellbildes in Bereiche. 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 vom äußeren Rand des Elements. Es können bis zu vier Werte angegeben werden. Siehe mask-border-outset.
<'mask-border-repeat'>: Definiert, wie die Randbereiche des Quellbilds angepasst werden, um die Abmessungen der Randmaske zu füllen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.
<'mask-border-mode'>: Definiert, ob das Quellbild als Luminanzmaske oder Alphamaske behandelt wird. Siehe mask-border-mode.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: `alpha` `mask-border-outset`: `0` `mask-border-repeat`: `stretch` `mask-border-slice`: `0` `mask-border-source`: `none` `mask-border-width`: `auto`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `mask-border-slice`: refer to size of the mask border image `mask-border-width`: relative to width/height of the mask border image area
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: wie angegeben `mask-border-outset`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers `mask-border-repeat`: wie angegeben `mask-border-slice`: wie angegeben `mask-border-source`: wie angegeben, aber mit absoluten `<url>` Werten `mask-border-width`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	wie die jeweiligen Kurzschreibweisen: `mask-border-mode`: diskret `mask-border-outset`: diskret `mask-border-repeat`: diskret `mask-border-slice`: diskret `mask-border-source`: diskret `mask-border-width`: diskret
Erstellt Stapelkontext	Ja

Formale Syntax

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>

In diesem Beispiel werden wir die Randmaske eines Elements mit einem Diamantenmuster versehen. Die Quelle für die Maske ist eine ".png"-Datei mit 90 x 90 Pixeln, die vertikal und horizontal aus drei Diamanten besteht:

Das Bild, das für die Maskenbeispiele auf dieser Seite verwendet wird. Die Maske ist ein transparentes Quadrat mit drei Reihen von jeweils drei Diamanten. Die Diamanten sind in einem sehr hellen, fast weißen Grauton gehalten. Der mittlere Bereich zwischen den Diamanten ist ebenfalls graue Vollfläche. Die Bereiche zwischen den Außenseiten der Diamanten und dem Bildrand sind transparent.

Um die Größe eines einzelnen Diamanten anzupassen, verwenden wir einen Wert von 90 geteilt durch 3, also 30, um das Bild in Eck- und Randbereiche zu zerteilen. Ein Wiederholungswert von round lässt die Maskenschnitte gleichmäßig passen, d.h. ohne Abschneiden oder Lücken.

html

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

css

.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 */
}