mask-border

Die CSS-Eigenschaft mask-border legt ein Randbild für den maskierten Randbereich eines Elements fest. Sie ist eine Kurzschreibweise für die Eigenschaften mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat und mask-border-mode in einer einzigen Deklaration.

.element {
  mask-border: url('mask.png') 100 / 50px round;
}

Unten sehen Sie ein Quellbild, das als Maskenrand für ein Element verwendet wird.

Syntax

Der einzige erforderliche Eigenschaftswert für mask-border ist mask-border-source, der auf die Bilddatei für den Rand verweist. Die anderen Eigenschaften werden auf ihre Anfangswerte zurückgesetzt, wenn sie nicht angegeben sind.

mask-border: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

• Anfangswert: Die Reihe der Anfangswerte der Langschreibweise-Eigenschaften (siehe einzelne Eigenschaften)
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements
• Vererbt: nein
• Animationstyp: diskret

Werte

/* source */
mask-border: url('mask.png');
/* source | slice | repeat */
mask-border: url('mask.webp') 10 space;
/* source | slice | width */
mask-border: url('mask.png') 15 / 5px;
/* source | slice | width | outset | repeat | mode */            
mask-border: url('mask.png') 20 / 25px / 5px round alpha;
/* All values */
mask-border: url(img.png) 20% 30% 25px 40 / 2em 3em 4em 1.5em / 10px 20px 15px 30px space;

/* Global values */
mask-border: inherit;
mask-border: initial;
mask-border: unset;

• initial: Wendet eine Reihe von Anfangswerten der Langschreibweise-Eigenschaften an.
• inherit: Übernimmt den mask-border-Wert des Elternelements.
• unset: Entfernt den aktuellen mask-border vom Element.

Anwenden eines Maskenrands

Der gesamte Vorgang eines Maskenrands erfolgt in folgenden Schritten.

1. Eine Bilddatei für das Maskenrandbild wird mit der Eigenschaft mask-border-source angegeben.
2. Das Bild wird mit der Eigenschaft mask-border-slice in neun Bilder zerlegt.
3. Die neun Bilder werden gemäß dem mit den Eigenschaften mask-border-width und mask-border-repeat angegebenen Wert skaliert.
4. Nachdem die Bilder skaliert wurden, werden sie positioniert und gekachelt, um ihre jeweiligen Bereiche mithilfe der Eigenschaft mask-border-repeat auszufüllen.

Nun wollen wir uns diesen Schritten und ihren entsprechenden Eigenschaften widmen.

mask-border-source

Die Eigenschaft mask-border-source legt eine Bilddatei fest, die als Maskenrand verwendet wird. Ein Bild, das leer ist, nicht heruntergeladen werden kann, nicht existiert oder nicht angezeigt werden kann, wird ignoriert und maskiert das Element nicht.

Syntax

mask-border-source: none | <image>

• Anfangswert: none
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements
• Vererbt: nein
• Animationstyp: diskret

Werte

/* Keyword value */
mask-border-source: none;

/* <image> values */
mask-border-source: url(img.webp);
mask-border-source: linear-gradient(90deg, #f00, #00f);
mask-border-source: radial-gradient(#e66465, #9198e5);

Das Setzen der Eigenschaft mask-border-source auf einen anderen Wert als none führt zur Erstellung eines Stacking Contexts, ähnlich wie die CSS-Eigenschaft opacity. Alle Nachfahren des Elements werden als Gruppe gerendert, wobei die Maskierung auf die gesamte Gruppe angewendet wird.

mask-border-mode

Die Eigenschaft mask-border-mode gibt an, ob das durch mask-border-source definierte Quellbild als Alphamask oder Luminanzmaske behandelt wird.

Sie können mehr über Alpha- und Luminanzmasken im Almanac-Eintrag für mask-mode lesen.

Syntax

Die Eigenschaft akzeptiert eines der folgenden Schlüsselwörter.

mask-border-mode: alpha | luminance

• Anfangswert: alpha
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements <use>
• Vererbt: nein
• Animationstyp: diskret

Werte

/* Keyword values */
mask-border-mode: luminance;
mask-border-mode: alpha;

• luminance: Die Luminanzwerte des Maskenrandbilds werden als Maskenwerte verwendet.
• alpha: Die Alphawerte des Maskenrandbilds werden als Maskenwerte verwendet.

Zum Zeitpunkt der Erstellung gibt es keine Browserunterstützung für diese Eigenschaft.

mask-border-slice

Die Eigenschaft mask-border-slice legt innere Abstände von den vier Rändern des durch mask-border-source definierten Maskenbilds fest und teilt es in neun Teile.

Wie Sie sehen, gibt es vier Ecken, vier Kanten und einen mittleren Bereich. Die vier Werte legen die oberen, rechten, unteren und linken Abstände in dieser Reihenfolge fest, wie folgt:

/* top | right | bottom | left */
mask-border-slice: 10 12 15 5;

Standardmäßig wird die Mitte des Quellbilds verworfen und als vollständig transparent schwarz behandelt, es sei denn, das Schlüsselwort fill wird angegeben.

mask-border-slice: 10 12 15 5 fill;

Syntax

mask-border-slice akzeptiert bis zu vier positive, einheitenlose Zahlen oder Prozentsätze und optional ein fill-Schlüsselwort.

mask-border-slice: [<number> | <percentage>]{1,4} fill?

• Anfangswert: 0
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements <use>
• Vererbt: nein
• Animationstyp: diskret

Werte

mask-border-slice folgt der gleichen Mehrwert-Syntax wie padding und margin. Das bedeutet, dass es bis zu vier Werte akzeptiert (um Abstände für oben, rechts, unten und links in dieser Reihenfolge anzugeben) und mindestens einen Wert (um einen gleichen Abstand für alle Ränder anzugeben). Die Werte fließen im Uhrzeigersinn, beginnend mit oben.

mask-border-slice: 10 15 5 7;     /* top right bottom left */
mask-border-slice: 10% 5% 15%;    /* top left/right bottom */
mask-border-slice: 0 10;          /* top/bottom left/right */
mask-border-slice: 20;            /* all edges = 20 */
mask-border-slice: 20% fill 10 8; /* Using the `fill` keyword */

• <Zahl>: Misst den Ausschnitt auf einem Rasterbild in Pixeln oder anhand von Koordinaten in SVG. Bei Vektorgrafiken bezieht sich die Zahl auf die Größe des Elements und nicht auf die Größe des Quellbilds.
• <Prozent>: Ein Prozentwert bezieht sich auf die Größe des Quellbilds – die Breite für horizontale Abstände und die Höhe für vertikale Abstände.
• fill: Behält den mittleren Teil des Bilds bei, der als zusätzliche Maskenbildschicht auf dem Element verwendet wird. Die Breite und Höhe des mittleren Teils entsprechen den oberen und linken Bildbereichen. Wenn das Schlüsselwort fill weggelassen wird, wird der mittlere Teil des Maskenbilds verworfen, d.h. als leer behandelt.

In der folgenden Demo können Sie den Wert dieser Eigenschaft ändern und das Ergebnis sehen.

mask-border-width

Die Eigenschaft mask-border-width gibt die Breite des Maskenrands eines Elements an. Die Maskenrandbreite teilt dem Browser **die Breite jeder Randseite** (erstellt durch die Eigenschaft mask-border-slice) mit, damit er das Maskenrandbild entsprechend skalieren kann.

Das Maskenrandbild wird in einem Bereich namens Maskenrandbildbereich gezeichnet. Dies ist ein Bereich, dessen Grenzen standardmäßig dem Randfeld entsprechen, d.h. er enthält Ränder, Polsterung und jeglichen Inhalt im Feld.

Die vier Werte von border-image-width geben Abstände an, die verwendet werden, um den Maskenrandbildbereich in neun Teile zu unterteilen. Sie repräsentieren innere Abstände von den oberen, rechten, unteren und linken Seiten des Bereichs.

Syntax

Die Eigenschaft akzeptiert bis zu vier Werte.

mask-border-width: [<length-percentage> | <number> | auto]{1,4}

• Initial: auto
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements <use>
• Vererbt: nein
• Animationstyp: diskret

Werte

mask-border-width folgt der gleichen Mehrwert-Syntax wie mask-border-slice.

/* Keyword */
mask-border-width: auto;

/* <number> */
mask-border-width: 5;

/* <length-percentage> value */
mask-border-width: 2em;
mask-border-width: 15%;

/* Multiple values */
mask-border-width: 1em 1.5em;
mask-border-width: 15% 10px 5%;
mask-border-width: 10% 1em auto 20%;

• <Länge-Prozent>: Jede gültige und nicht negative CSS-Länge, wie px, em, rem und %, unter anderem. Prozentsätze beziehen sich auf die Breite **des Maskenrandbildbereichs (standardmäßig das Randfeld) für horizontale Abstände und die Höhe des Maskenrandbildbereichs für vertikale Abstände.
• <Zahl>: Repräsentiert Vielfache der entsprechenden berechneten border-width. Wenn also die border-width 5px beträgt und der mask-border-image-Wert 2 ist, beträgt die Breite des Maskenrands insgesamt 10px.
• auto: Wenn angegeben, ist die Maskenrandbildbreite die intrinsische Breite oder Höhe (was zutreffend ist) des entsprechenden Bildausschnitts. Wenn das Bild nicht über die erforderliche intrinsische Dimension verfügt, wird die entsprechende border-width verwendet.

Nachdem die Eigenschaft border-image-width angewendet wurde.

• Die beiden Bilder für die oberen und unteren Kanten werden so hoch wie die oberen bzw. unteren Teile des Maskenrandbildbereichs gemacht, und ihre Breite wird proportional skaliert.
• Die Bilder für die linken und rechten Kanten werden so breit wie die linken bzw. rechten Teile des Maskenrandbildbereichs gemacht und ihre Höhe wird proportional skaliert.
• Die Eckbilder werden so skaliert, dass sie so breit und so hoch wie die beiden Maskenrandbildkanten sind, zu denen sie gehören.
• Die Breite des mittleren Bildes wird mit demselben Faktor wie das obere Bild skaliert, es sei denn, dieser Faktor ist null oder unendlich. In diesem Fall wird der Skalierungsfaktor des unteren Bildes verwendet, und wenn dies nicht möglich ist, wird die Breite nicht skaliert. Die Höhe des mittleren Bildes wird mit demselben Faktor wie das linke Bild skaliert, es sei denn, dieser Faktor ist null oder unendlich. In diesem Fall wird der Skalierungsfaktor des rechten Bildes verwendet, und wenn dies nicht möglich ist, wird die Höhe nicht skaliert.

In der folgenden Demo können Sie den Wert dieser Eigenschaft ändern und das Ergebnis sehen.

mask-border-outset

Die Eigenschaft mask-border-outset gibt an, wie weit der Maskenrandbildbereich über das Randfeld hinausragt.

Wie wir bereits erwähnt haben, entsprechen die Grenzen des Maskenrandbildbereichs standardmäßig den Grenzen des Randfelds des Elements. Die Grenzen des Maskenrandbildbereichs können jedoch mit der Eigenschaft mask-border-outset erweitert werden.

Syntax

Die Eigenschaft akzeptiert bis zu vier positive Längenwerte oder einheitenlose Zahlen.

mask-border-outset: [<length> | <number>]{1,4}

• Anfangswert: 0
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements <use>
• Vererbt: nein
• Animationstyp: diskret

Werte

mask-border-outset folgt der gleichen Mehrwert-Syntax wie mask-border-slice.

/* <number> value */
mask-border-outset: 5;

/* <length> value */
mask-border-outset: 10px;

/* Multiple values */
mask-border-outset: 1em 1.5em;
mask-border-outset: 15px 10px 5;
mask-border-outset: 10 1rem 2rem 0.5rem;

• <Länge>: Jede gültige und nicht negative CSS-Länge setzt die Größe des Maskenrand-Outsets fest.
• <Zahl>: Eine einheitenlose Zahl wird mit der Randbreite multipliziert, um den Outset-Wert zu berechnen, ähnlich wie einheitenlose Zahlen für border-image-width funktionieren.

In der folgenden Demo können Sie den Wert dieser Eigenschaft ändern und das Ergebnis sehen.

mask-border-repeat

Die Eigenschaft mask-border-repeat steuert, wie die Bilder für die Seiten und den mittleren Teil des Maskenrandbilds im verfügbaren Bereich skaliert und gekachelt werden.

Syntax

mask-border-repeat: [ stretch | repeat | round | space ]{1,2}

• Anfangswert: stretch
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des Elements <defs>, aller grafischen Elemente und des Elements <use>
• Vererbt: nein
• Animationstyp: diskret

Werte

Die Eigenschaft mask-border-repeat nimmt einen oder zwei Werte an.

• ein **einzelner** Wert wendet dasselbe Verhalten auf **alle vier Seiten** an.
• Wenn **zwei** Werte vorhanden sind, gilt der erste für **oben und unten** und der zweite für **links und rechts**.

/* Keyword value */
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/* vertical | horizontal */
mask-border-repeat: space round;

• stretch: Der Standardwert. Die Kantenstücke des Quellbilds werden nach Bedarf gestreckt, um den Bereich zu füllen. Wenn dies das erste Schlüsselwort ist, werden die oberen, mittleren und unteren Maskenrandbildkacheln so skaliert, dass sie so breit wie der mittlere Teil des Maskenrandbildbereichs sind, und die Höhe wird nicht skaliert. Wenn dies das zweite Schlüsselwort ist, werden die linken, mittleren und rechten Maskenrandbildkacheln so hoch wie der mittlere Teil des Maskenrandbildbereichs skaliert. Die Breite wird nicht skaliert.
• repeat: Die Kantenstücke des Quellbilds werden bei Bedarf gekachelt (wiederholt), um den Bereich zu füllen, und Kacheln werden bei Bedarf abgeschnitten.
• round: Dasselbe wie der Wert repeat. Der einzige Unterschied besteht darin, dass anstelle des Abschneidens von Kacheln für die richtige Passform Kacheln gestreckt werden.
• space: Dasselbe wie der Wert repeat, nur dass, wenn der Bereich nicht mit einer ganzen Anzahl von Kacheln gefüllt wird, der zusätzliche Platz um die Kacheln verteilt wird, sodass Kacheln nicht abgeschnitten oder gestreckt werden.

In der folgenden Demo können Sie den Wert dieser Eigenschaft ändern und das Ergebnis sehen.

Browser-Unterstützung

Zum Zeitpunkt der Erstellung unterstützt Firefox diese Eigenschaft nicht. Damit die Eigenschaft in Chromium-basierten Browsern funktioniert, müssen Sie das Präfix -webKit- verwenden, wie z. B. -webkit-mask-box-image. Das Gleiche gilt für die einzelnen Eigenschaften wie -webkit-mask-box-image-repeat oder -webkit-mask-box-image-source und so weiter.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	921	Nein	41	3.11	151

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
3.21	941	Nein	2.11	641

Weitere Informationen

• CSS Masking Module Level 1

Verwandte Beiträge

Verwandt