mask-border-outset
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die mask-border-outset
CSS Eigenschaft gibt an, um welchen Abstand der Maskenrand eines Elements von seiner Rahmenbox gesetzt wird.
Syntax
/* <length> value */
mask-border-outset: 1rem;
/* <number> value */
mask-border-outset: 1.5;
/* top and bottom | left and right */
mask-border-outset: 1 1.2;
/* top | left and right | bottom */
mask-border-outset: 30px 2 45px;
/* top | right | bottom | left */
mask-border-outset: 7px 12px 14px 5px;
/* Global values */
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: revert;
mask-border-outset: revert-layer;
mask-border-outset: unset;
Die mask-border-outset
Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist entweder ein <length>
oder ein <number>
. Negative Werte sind ungültig.
- Wenn ein Wert angegeben wird, gilt der gleiche Abstand für alle vier Seiten.
- Wenn zwei Werte angegeben werden, gilt der erste Abstand für oben und unten, der zweite für links und rechts.
- Wenn drei Werte angegeben werden, gilt der erste Abstand für oben, der zweite für links und rechts, der dritte für unten.
- Wenn vier Werte angegeben werden, gelten die Abstände der Reihe nach (im Uhrzeigersinn) für oben, rechts, unten und links.
Werte
<length>
-
Die Größe des Maskenrandabstands als Dimension.
<number>
-
Die Größe des Maskenrandabstands als Vielfaches der entsprechenden
border-width
.
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
Vererbt | Nein |
Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
Animationstyp | diskret |
Formale Syntax
Beispiele
Grundlegende Verwendung
Diese Eigenschaft scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Maske vom inneren Rand der Rahmenbox des Elements wegzubewegen — Sie können sie verwenden, um die Maske ab einem Teil des Randes beginnen zu lassen, anstatt im Inneren davon.
mask-border-outset: 1rem;
Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-outset
— mit einem Präfix:
-webkit-mask-box-image-outset: 1rem;
Hinweis:
Die Seite mask-border
zeigt ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten Maskenrand-Präfix-Eigenschaften), sodass Sie eine Vorstellung vom Effekt bekommen können.
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # the-mask-border-outset |