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 festgelegte Bild in Regionen. Diese Regionen werden verwendet, um die Komponenten des Maskierungsrahmens eines Elements 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 vier <number-percentage>-Werten spezifiziert werden, um die Position jedes Bildschnittes darzustellen. Negative Werte sind ungültig; Werte, die über ihrer entsprechenden Dimension liegen, werden auf 100% begrenzt.
- Wenn eine Position angegeben wird, werden alle vier Schnitte im gleichen Abstand von ihren jeweiligen Seiten erstellt.
- Wenn zwei Positionen angegeben werden, erstellt der erste Wert Schnitte, die vom oberen und unteren Rand gemessen werden, der zweite erstellt Schnitte, die vom linken und rechten Rand gemessen werden.
- Wenn drei Positionen angegeben werden, erstellt der erste Wert einen Schnitt, der vom oberen Rand gemessen wird, der zweite erstellt Schnitte, die vom linken und rechten Rand gemessen werden, der dritte erstellt einen Schnitt, der vom unteren Rand gemessen wird.
- Wenn vier Positionen angegeben werden, erstellen sie Schnitte, die im Uhrzeigersinn vom oberen, rechten, unteren und linken Rand gemessen werden.
Der optionale Wert fill, falls verwendet, kann an beliebiger Stelle in der Deklaration platziert werden.
Werte
<number>-
Stellt einen Randabstand in Pixeln für Rasterbilder und Koordinaten für Vektorbilder dar. Für Vektorbilder ist die Zahl relativ zur Größe des Elements, nicht zur Größe des Quellbildes, daher sind in diesen Fällen Prozentsätze im Allgemeinen vorzuziehen.
<percentage>-
Stellt einen Randabstand als Prozentsatz der Größe des Quellbildes dar: 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 den oberen und linken Bildregionen entsprechen.
Beschreibung
Der Schneideprozess erstellt insgesamt neun Regionen: vier Ecken, vier Kanten und eine mittlere Region. Vier Schnittlinien, die einen bestimmten Abstand von ihren jeweiligen Seiten haben, kontrollieren die Größe der Regionen.
Das obige Diagramm veranschaulicht die Lage jeder Region.
- Zonen 1-4 sind Eckregionen. Jede wird einmal verwendet, um die Ecken des endgültigen Rahmenbildes zu bilden.
- Zonen 5-8 sind Kantenregionen. Diese werden wiederholt, skaliert oder anderweitig modifiziert, um im endgültigen Rahmenbild den Abmessungen des Elements zu entsprechen.
- Zone 9 ist die mittlere Region. Sie wird standardmäßig verworfen, aber wie ein Hintergrundbild verwendet, wenn das Schlüsselwort
fillgesetzt ist.
Die mask-border-repeat, mask-border-width und mask-border-outset Eigenschaften bestimmen, wie diese Regionen verwendet werden, um den endgültigen Maskierungsrahmen 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 =
[ <number> | <percentage> ]{1,4} fill?
Beispiele
Grundlegende Verwendung
mask-border-slice dient dazu, die Größe der aus dem Quellbild genommenen Schnitte zu definieren und wird verwendet, um die Maskenrahmen zu erstellen.
mask-border-slice: 30 fill;
Browser, die auf Chromium basieren, 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 (unter Verwendung der veralteten maskierten Rahmen-Eigenschaften mit Präfix in Chromium), sodass Sie eine Vorstellung vom Effekt bekommen.
Hinweis: Das fill-Schlüsselwort muss eingefügt werden, wenn Sie den Inhalt des Elements sichtbar haben möchten.
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-slice |