mask-border-width CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
Die mask-border-width CSS-Eigenschaft legt die Breite der Maskenrand 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 Eigenschaft mask-border-width kann mit einem, zwei, drei oder vier Werten aus der nachfolgenden Liste angegeben werden.
- Wenn ein Wert angegeben wird, gilt die gleiche Breite 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 in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<length-percentage>-
Die Breite des Maskenrands, angegeben als
<length>oder<percentage>. Prozentsätze beziehen sich auf die Breite des Randbereichs für horizontale Abstände und die Höhe des Randbereichs für vertikale Abstände. Darf nicht negativ sein. <number>-
Die Breite des Maskenrands, angegeben als ein Vielfaches der entsprechenden
border-width. Darf nicht negativ sein. auto-
Die Breite des Maskenrands wird gleich der intrinsischen Breite oder Höhe (je nachdem, was zutrifft) der entsprechenden
mask-border-slicegemacht. Wenn das Bild nicht die erforderliche intrinsische Dimension 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 =
<'border-image-width'>
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Beispiele
Grundlegende Nutzung
mask-border-width definiert die Breite des Randmaskens — das Festlegen auf einen anderen Wert als mask-border-slice bewirkt, dass die Scheiben skaliert werden, um in die Randmaskens zu 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 (mit den veralteten, in Chromium unterstützten, mit Präfix versehenen Randmasken-Eigenschaften), sodass Sie eine Vorstellung von der Wirkung bekommen können.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-border-width |