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 der Kante des Randes eines Elements zu erstellen.

Bestandteile der 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 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.

Formale Definition

Anfangswertwie 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

Eine Bitmap-basierte Maskengrenze festlegen

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:

Das Bild, das für die Maskenbeispiele auf dieser Seite verwendet wird. 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 mittlere Teil zwischen den Rauten ist ebenfalls durchgehend grau. Die Teile zwischen der Außenseite der Rauten und dem Rand des Bildes sind transparent.

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.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch