mask-border-slice CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die mask-border-slice CSS Eigenschaft unterteilt das Bild, das durch mask-border-source festgelegt wurde, in Regionen. Diese Regionen werden verwendet, um die Komponenten eines Elements Maskenrahmen zu bilden.
Syntax
/* 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 einem bis zu vier <number-percentage>-Werten spezifiziert werden, um die Position jedes Bildausschnitts darzustellen. Negative Werte sind ungültig; Werte, die größer als die entsprechende Dimension sind, werden auf 100% begrenzt.
- Wenn eine Position angegeben wird, werden alle vier Ausschnitte im gleichen Abstand zu ihren jeweiligen Seiten erstellt.
- Wenn zwei Positionen angegeben werden, wird mit dem ersten Wert die Messung der Ausschnitte oben und unten vorgenommen, mit dem zweiten die Messung links und rechts.
- Wenn drei Positionen angegeben werden, wird mit dem ersten Wert der Ausschnitt oben gemessen, mit dem zweiten die Messung der Ausschnitte links und rechts, mit dem dritten der Ausschnitt unten.
- Wenn vier Positionen angegeben werden, werden die Ausschnitte in der Reihenfolge oben, rechts, unten und links gemessen (im Uhrzeigersinn).
Der optionale fill-Wert, falls verwendet, kann an beliebiger Stelle in der Deklaration platziert werden.
Werte
<number>-
Repräsentiert einen Randversatz in Pixeln für Rasterbilder und Koordinaten für Vektorbilder. Bei Vektorbildern ist die Zahl relativ zur Größe des Elements, nicht zur Größe des Quellbildes, sodass in diesen Fällen prozentuale Angaben allgemein bevorzugt werden.
<percentage>-
Repräsentiert einen Randversatz als Prozentsatz der Größe des Quellbildes: die Breite des Bildes für horizontale Versätze, die Höhe für vertikale Versätze.
fill-
Bewahrt die mittlere Bildregion. Ihre Breite und Höhe werden so bemessen, dass sie der oberen und linken Bildregion entsprechen.
Beschreibung
Der Schneidvorgang erstellt insgesamt neun Regionen: vier Ecken, vier Kanten und eine mittlere Region. Vier Schneidelinien, die in einem bestimmten Abstand zu ihren jeweiligen Seiten liegen, steuern die Größe der Regionen.
Das obige Diagramm veranschaulicht die Lage jeder Region.
- Zu den Bereichen 1-4 gehören die Eckregionen. Jede wird einmal verwendet, um die Ecken des finalen Rahmenbildes zu formen.
- Die Bereiche 5-8 sind Kantenregionen. Diese werden wiederholt, skaliert oder anderweitig modifiziert, um im finalen Rahmenbild die Dimensionen des Elements anzupassen.
- Bereich 9 ist die mittlere Region. Standardmäßig wird sie verworfen, jedoch ähnlich einem Hintergrundbild verwendet, wenn das Schlüsselwort
fillgesetzt ist.
Die Eigenschaften mask-border-repeat, mask-border-width, und mask-border-outset bestimmen, wie diese Regionen verwendet werden, um den finalen Maskenrahmen zu bilden.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
| Vererbt | Nein |
| Prozentwerte | refer to size of the mask border image |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
mask-border-slice =
<'border-image-slice'>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
Beispiele
Grundlegende Verwendung
mask-border-slice dient dazu, die Größe der aus dem Quellbild entnommenen Ausschnitte zu definieren, und wird verwendet, um die Maskenrahmen zu erstellen.
mask-border-slice: 30 fill;
Browser basierend auf Chromium unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-slice — mit einem Präfix:
-webkit-mask-box-image-slice: 30 fill;
Hinweis:
Die Seite mask-border enthält ein funktionierendes Beispiel (bei dem die veralteten, in Chromium unterstützten Rahmeneigenschaften mit Präfix verwendet werden), damit Sie eine Vorstellung vom Effekt bekommen.
Hinweis:
Das fill-Schlüsselwort muss enthalten sein, wenn Sie möchten, dass der Inhalt des Elements sichtbar ist.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-border-slice |