mask-border-width
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die mask-border-width CSS Eigenschaft legt die Breite des Maskenrands eines Elements fest.
Syntax
/* Keyword value */
mask-border-width: auto;
/* <length> value */
mask-border-width: 1rem;
/* <percentage> value */
mask-border-width: 25%;
/* <number> value */
mask-border-width: 3;
/* top and bottom | left and right */
mask-border-width: 2em 3em;
/* top | left and right | bottom */
mask-border-width: 5% 15% 10%;
/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;
/* Global values */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: revert-layer;
mask-border-width: unset;
Die mask-border-width Eigenschaft kann mit einem, zwei, drei oder vier Werten aus der untenstehenden Werteliste angegeben werden.
- Wenn ein Wert angegeben wird, gilt er für alle vier Seiten.
- Wenn zwei Werte angegeben werden, gilt die erste Breite für oben und unten, die zweite für links und rechts.
- Wenn drei Werte angegeben werden, gilt die erste Breite für oben, die zweite für links und rechts, die dritte für unten.
- Wenn vier Werte angegeben werden, gelten die Breiten im Uhrzeigersinn für oben, rechts, unten und links.
Werte
<length-percentage>-
Die Breite des Maskenrands, angegeben als
<length>oder<percentage>. Prozentsätze beziehen sich auf die Breite des Randbereichs für horizontale Versätze und die Höhe des Randbereichs für vertikale Versätze. Darf nicht negativ sein. <number>-
Die Breite des Maskenrands, angegeben als Vielfaches der entsprechenden
border-width. Darf nicht negativ sein. auto-
Die Breite des Maskenrands wird der intrinsischen Breite oder Höhe (je nachdem, was zutrifft) des entsprechenden
mask-border-sliceangeglichen. Wenn das Bild nicht die erforderliche intrinsische Abmessung hat, wird stattdessen die entsprechendeborder-widthverwendet.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
| Vererbt | Nein |
| Prozentwerte | relative to width/height of the mask border image area |
| Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
| Animationstyp | diskret |
Formale Syntax
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Beispiele
Grundlegende Verwendung
mask-border-width definiert die Breite der Maskengrenze — wenn dieser Wert von mask-border-slice abweicht, werden die Abschnitte so skaliert, dass sie zur Maskengrenze passen.
/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;
Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-width — mit einem Präfix:
-webkit-mask-box-image-width: 20px;
Hinweis:
Die Seite mask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten Maskengrenze-Eigenschaften mit Präfixen, die in Chromium unterstützt werden), sodass Sie eine Vorstellung von der Wirkung bekommen können.
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-width |