mask-border-slice

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die mask-border-slice CSS Eigenschaft teilt das durch mask-border-source angegebene Bild in Regionen ein. Diese Regionen werden verwendet, um die Komponenten des Maskenrands eines Elements zu bilden.

Syntax

css
/* All sides */
mask-border-slice: 30%;

/* top and bottom | left and right */
mask-border-slice: 10% 30%;

/* top | left and right | bottom */
mask-border-slice: 30 30% 45;

/* top | right | bottom | left */
mask-border-slice: 7 12 14 5;

/* Using the `fill` keyword */
mask-border-slice: 10% fill 7 12;

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

Die mask-border-slice Eigenschaft kann mit ein bis vier <number-percentage> Werten angegeben werden, um die Position jedes Bildausschnitts darzustellen. Negative Werte sind ungültig; Werte, die ihre entsprechende Dimension überschreiten, werden auf 100% begrenzt.

  • Wenn eine Position angegeben wird, werden alle vier Schnitte auf demselben Abstand von ihren jeweiligen Seiten erstellt.
  • Wenn zwei Positionen angegeben werden, erstellt der erste Wert Schnitte, die von oben und unten gemessen werden, der zweite erstellt Schnitte, die von links und rechts gemessen werden.
  • Wenn drei Positionen angegeben werden, erstellt der erste Wert einen Schnitt, der von oben gemessen wird, der zweite erstellt Schnitte, die von links und rechts gemessen werden, der dritte erstellt einen Schnitt, der von unten gemessen wird.
  • Wenn vier Positionen angegeben werden, erstellen sie Schnitte, die der Reihe nach (im Uhrzeigersinn) von oben, rechts, unten und links gemessen werden.

Der optionale fill Wert, falls verwendet, kann an beliebiger Stelle in der Deklaration platziert werden.

Werte

<number>

Repräsentiert einen Kantenversatz in Pixeln für Rasterbilder und Koordinaten für Vektorbilder. Für Vektorbilder ist die Zahl relativ zur Größe des Elements und nicht zur Größe des Quellbilds, daher sind in diesen Fällen Prozentsätze allgemein vorzuziehen.

<percentage>

Repräsentiert einen Kantenversatz als Prozentsatz der Größe des Quellbilds: die Breite des Bildes für horizontale Versatz, die Höhe für vertikale Versatz.

fill

Erhält die mittlere Bildregion. Ihre Breite und Höhe werden so angepasst, dass sie zu den oberen und linken Bildregionen passen.

Beschreibung

Der Schneidevorgang erstellt insgesamt neun Regionen: vier Ecken, vier Kanten und eine mittlere Region. Vier Schnittlinien, die einen bestimmten Abstand von ihren jeweiligen Seiten haben, steuern die Größe der Regionen.

Die neun Regionen, die durch die border-image oder border-image-slice Eigenschaften definiert werden

Das obige Diagramm zeigt die Lage jeder Region.

  • Zonen 1-4 sind Eckregionen. Jede wird einmal verwendet, um die Ecken des endgültigen Maskenrandbilds zu formen.
  • Zonen 5-8 sind Kantenregionen. Diese werden wiederholt, skaliert oder anderweitig modifiziert, um den Abmessungen des Elements im endgültigen Maskenrandbild zu entsprechen.
  • Zone 9 ist die mittlere Region. Sie wird standardmäßig verworfen, aber wie ein Hintergrundbild verwendet, wenn das Schlüsselwort fill gesetzt ist.

Die mask-border-repeat, mask-border-width, und mask-border-outset Eigenschaften bestimmen, wie diese Regionen verwendet werden, um die endgültige Maskengrenze zu bilden.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Prozentwerterefer to size of the mask border image
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Grundlegende Nutzung

mask-border-slice dient dazu, die Größe der aus dem Quellbild genommenen Schnitte zu definieren und wird verwendet, um den Maskenrand zu erstellen.

css
mask-border-slice: 30 fill;

Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-slice — mit einem Präfix:

css
-webkit-mask-box-image-slice: 30 fill;

Hinweis: Die mask-border Seite enthält ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten Prefixed-Maskenrandeigenschaften), damit Sie eine Vorstellung von der Wirkung bekommen können.

Hinweis: Das Schlüsselwort fill muss eingeschlossen werden, wenn Sie möchten, dass der Inhalt des Elements sichtbar ist.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch