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 Maskenrandes 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 angegeben werden, die aus der folgenden Liste ausgewählt 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 für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).
Werte
<length-percentage>
-
Die Breite des Maskenrandes, angegeben als ein
<length>
oder ein<percentage>
. Prozentsätze beziehen sich auf die Breite des Randbereichs für horizontale Versätze und auf die Höhe des Randbereichs für vertikale Versätze. Darf nicht negativ sein. <number>
-
Die Breite des Maskenrandes, angegeben als ein Vielfaches der entsprechenden
border-width
. Darf nicht negativ sein. auto
-
Die Breite des Maskenrandes wird der intrinsischen Breite oder Höhe (je nachdem, was anwendbar ist) der entsprechenden
mask-border-slice
gleichgesetzt. Wenn das Bild nicht die erforderliche intrinsische Dimension hat, wird stattdessen die entsprechendeborder-width
verwendet.
Formale Definition
Initialer Wert | 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
Beispiele
Grundlegende Verwendung
Diese Eigenschaft scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Breite des Maskenrandes zu definieren — das Setzen eines anderen Wertes als mask-border-slice
bewirkt, dass die Schnitte skaliert werden, um in den Maskenrand zu passen.
mask-border-width: 30 fill;
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, in Chromium unterstützten prefixed Maskenrand-Eigenschaften), sodass Sie eine Vorstellung von der Wirkung bekommen können.
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # the-mask-border-width |
Browser-Kompatibilität
BCD tables only load in the browser