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.
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 =
[ <length-percentage> | <number> | 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 |