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 Kurzform-Eigenschaft ermöglicht es Ihnen, eine Maske entlang des Randes eines Elements zu erstellen.

Zusammengesetzte 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 Zerschneiden des Quellbildes in Bereiche. Bis zu vier Werte können angegeben werden. Siehe mask-border-slice.

<'mask-border-width'>

Die Breite der Randmaske. Bis zu vier Werte können angegeben werden. Siehe mask-border-width.

<'mask-border-outset'>

Der Abstand der Randmaske vom äußeren Rand des Elements. Bis zu vier Werte können angegeben werden. Siehe mask-border-outset.

<'mask-border-repeat'>

Definiert, wie die Randbereiche des Quellbildes angepasst werden, um den Dimensionen der Randmaske zu entsprechen. Bis zu zwei Werte können angegeben werden. Siehe mask-border-repeat.

<'mask-border-mode'>

Definiert, ob das Quellbild als Luminanz- 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

Festlegen eines bitmap-basierten Maskenrands

In diesem Beispiel werden wir den Rand eines Elements mit einem Diamantmuster maskieren. Die Quelle für die Maske ist eine ".png"-Datei mit 90 mal 90 Pixeln, die vertikal und horizontal drei Diamanten enthält:

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 in Grautönen gehalten. Die Teile 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 oder 30, um das Bild in Eck- und Randbereiche zu zerschneiden. Ein Wiederholungswert von round sorgt dafür, dass die Maskenabschnitte 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