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 Bereiche. Diese Bereiche werden verwendet, um die Komponenten des Maskenrandes 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 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% beschränkt.
- Wenn ein Wert angegeben wird, werden alle vier Ausschnitte in gleichem Abstand zu ihren jeweiligen Seiten erstellt.
- Wenn zwei Werte angegeben werden, erzeugt der erste Wert Ausschnitte, die vom oberen und unteren Rand gemessen werden, der zweite Wert erzeugt Ausschnitte, die vom linken und rechten Rand gemessen werden.
- Wenn drei Werte angegeben werden, erzeugt der erste Wert einen Ausschnitt, der vom oberen Rand gemessen wird, der zweite Wert erzeugt Ausschnitte, die vom linken und rechten Rand gemessen werden, der dritte Wert erzeugt einen Ausschnitt, der vom unteren Rand gemessen wird.
- Wenn vier Werte angegeben werden, werden Ausschnitte vom oberen, rechten, unteren und linken Rand in dieser Reihenfolge (im Uhrzeigersinn) gemessen.
Der optionale Wert fill, falls verwendet, kann überall in der Deklaration platziert werden.
Werte
<number>-
Repräsentiert einen Randabstand in Pixel 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 Quellbildes, daher sind Prozentsätze in diesen Fällen im Allgemeinen vorzuziehen.
<percentage>-
Repräsentiert einen Randabstand als Prozentsatz der Größe des Quellbildes: die Breite des Bildes für horizontale Abstände, die Höhe für vertikale Abstände.
fill-
Erhält den mittleren Bildbereich. Seine Breite und Höhe sind so bemessen, dass sie den oberen und linken Bildbereichen entsprechen.
Beschreibung
Der Schneideprozess erzeugt insgesamt neun Bereiche: vier Ecken, vier Ränder und einen mittleren Bereich. Vier Schnittlinien, die in einem bestimmten Abstand von ihren jeweiligen Seiten festgelegt sind, steuern die Größe der Bereiche.
Das obige Diagramm zeigt die Lage jedes Bereichs.
- Zonen 1-4 sind Eckbereiche. Jeder von ihnen wird jeweils einmal verwendet, um die Ecken des endgültigen Randbildes zu bilden.
- Zonen 5-8 sind Randbereiche. Diese werden im endgültigen Randbild wiederholt, skaliert oder anderweitig modifiziert, um den Dimensionen des Elements zu entsprechen.
- Zone 9 ist der mittlere Bereich. Er wird standardmäßig verworfen, aber wie ein Hintergrundbild verwendet, wenn das Schlüsselwort
fillgesetzt ist.
Die Eigenschaften mask-border-repeat, mask-border-width und mask-border-outset bestimmen, wie diese Bereiche verwendet werden, um den endgültigen Maskenrand 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 entnommenen Ausschnitte zu definieren und wird verwendet, um den Randmasken zu erstellen.
mask-border-slice: 30 fill;
Auf Chromium-basierte Browser 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 präfixierten Border-Masken-Eigenschaften, die in Chromium unterstützt werden), so dass Sie einen Eindruck von dem Effekt bekommen.
Hinweis:
Das Schlüsselwort fill muss enthalten sein, 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
Loading…