`mask-border` CSS-Eigenschaft

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Zusammengehörige Eigenschaften

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 Maße für das 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 von der Außenkante des Elements. Es können bis zu vier Werte angegeben werden. Siehe mask-border-outset.
<'mask-border-repeat'>: Definiert, wie die Randbereiche des Quellbildes angepasst werden, um die Dimensionen der Randmaske zu erfüllen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.
<'mask-border-mode'>: Definiert, ob das Quellbild als Luminanzmaske oder als 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> = 
  <'border-image-source'>  

<mask-border-slice> = 
  <'border-image-slice'>  

<mask-border-width> = 
  <'border-image-width'>  

<mask-border-outset> = 
  <'border-image-outset'>  

<mask-border-repeat> = 
  <'border-image-repeat'>  

<mask-border-mode> = 
  luminance  |
  alpha      

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

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

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

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

<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 Umrandung eines Elements mit einem Diamantmuster maskieren. Die Quelle für die Maske ist eine ".png"-Datei mit 90 mal 90 Pixeln, mit drei vertikalen und horizontalen Diamanten:

Das für die Maskenbeispiele auf dieser Seite verwendete Bild. Die Maske ist ein transparenter Quadrat mit drei Reihen von je drei Diamanten. Die Diamanten sind in einem sehr hellen, fast weißen, Grauton. Der mittlere Teil zwischen den Diamanten ist ebenfalls einheitlich grau. Die Bereiche zwischen der Außenseite der Diamanten und dem Rand des Bildes 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 sorgt dafür, dass die Maskenschnitte gleichmäßig passen, d.h. ohne Beschneidung 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 */
}