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-Kurzschrift-Eigenschaft ermöglicht es Ihnen, eine Maske entlang der Kante eines Elementrahmens zu erstellen.

Bestandteile

Diese Eigenschaft ist eine Kurzschrift 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 Zerschneiden des Quellbildes in Bereiche. Es können bis zu vier Werte angegeben werden. Siehe mask-border-slice.

<'mask-border-width'>

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

<'mask-border-outset'>

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

<'mask-border-repeat'>

Bestimmt, wie die Randbereiche des Quellbildes angepasst werden, um die Dimensionen der Maskenrahmen zu erfüllen. Es können bis zu zwei Werte angegeben werden. Siehe mask-border-repeat.

<'mask-border-mode'>

Bestimmt, ob das Quellbild als Luminanzmaske oder Alphamaske behandelt wird. Siehe mask-border-mode.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Erstellt StapelkontextJa

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>       |
  <gradient>  

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

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

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

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

Beispiele

Setzen einer bitmap-basierten Maskenrahmen

In diesem Beispiel maskieren wir den Rahmen eines Elements mit einem Rautenmuster. Die Quelle für die Maske ist eine ".png"-Datei mit 90 x 90 Pixeln, mit drei Rauten in vertikaler und horizontaler Anordnung:

Das auf dieser Seite für die Masken-Beispiele verwendete Bild. Die Maske ist ein transparentes Quadrat mit drei Reihen von jeweils drei Rauten. Die Rauten sind in einem sehr hellen, fast weißen Grauton. Der Mittelteil zwischen den Rauten ist ebenfalls solide grau. Die Bereiche zwischen den Außenseiten der Rauten und dem Rand des Bildes sind transparent.

Um die Größe einer einzelnen Raute zu treffen, verwenden wir einen Wert von 90 geteilt durch 3, also 30, um das Bild in Kanten- und Randbereiche zu zerschneiden. Ein Wiederholungswert von round wird die Maskenschnitte gleichmäßig anpassen, d.h. ohne Zuschnitt oder Lücken.

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask-border

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch