`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 Elementrahmens zu erstellen.

Bestandteileigenschaften

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 Dimensionen zum Schneiden des Quellbilds in Bereiche. Es können bis zu vier Werte angegeben werden. Siehe mask-border-slice.
<'mask-border-width'>: Die Breite der Rahmenmaske. Es können bis zu vier Werte angegeben werden. Siehe mask-border-width.
<'mask-border-outset'>: Der Abstand der Rahmenmaske 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 den Abmessungen der Rahmenmaske zu entsprechen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.
<'mask-border-mode'>: Definiert, ob das Quellbild als Leuchtkraftmaske 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> = 
  <'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 maskieren wir den Rahmen eines Elements mit einem Diamantmuster. Die Quelle für die Maske ist eine ".png"-Datei mit einer Größe von 90 mal 90 Pixeln, mit drei Diamanten vertikal und horizontal:

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 Teil zwischen den Diamanten ist ebenfalls voll grau. Die Teile zwischen dem Äußeren 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, oder 30, um das Bild in Eck- und Randbereiche zu unterteilen. Ein Wiederholungswert von round wird die Maskenschnitte gleichmäßig anpassen, d.h. ohne Beschneiden 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 */
}