mask-border-width
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété CSS mask-border-width définit la largeur du masque de bordure d'un élément.
Syntaxe
/* Valeur avec un mot-clé */
mask-border-width: auto;
/* Valeur de type <length> */
mask-border-width: 1rem;
/* Valeur de type <percentage> */
mask-border-width: 25%;
/* Valeur de type <number> */
mask-border-width: 3;
/* vertical | horizontal */
mask-border-width: 2em 3em;
/* haut | horizontal | bas */
mask-border-width: 5% 15% 10%;
/* haut | droit | bas | gauche */
mask-border-width: 5% 2em 10% auto;
/* Valeurs globales */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: revert-layer;
mask-border-width: unset;
La propriété mask-border-width peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.
- Lorsque une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.
- Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.
- Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droite et la troisième au côté bas.
- Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droite, bas et gauche dans cet ordre (c'est-à-dire le sens horaire).
Valeurs
<length-percentage>-
La largeur du masque de bordure, définie avec une valeur de type
<length>ou<percentage>. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative. <number>-
La largeur du masque de bordure comme multiple de la largeur
border-width. Cette valeur ne peut pas être négative. auto-
La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur
mask-border-slicecorrespondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeurborder-widthqui est utilisée à la place.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments <defs> et des éléments graphiques |
| Héritée | non |
| Pourcentages | relative to width/height of the mask border image area |
| Valeur calculée | comme défini, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | discrète |
Syntaxe formelle
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Exemples
Utilisation simple
mask-border-width définit la largeur du masque de bordure — définir cette valeur différemment de mask-border-slice entraînera la mise à l'échelle des tranches pour s'adapter au masque de bordure.
/* Masque final réduit à 20px de large */
mask-border-slice: 30 fill;
mask-border-width: 20px;
Les navigateurs basés sur Chromium prennent en charge une version obsolète de cette propriété — mask-box-image-width — avec un préfixe :
-webkit-mask-box-image-width: 20px;
Note :
La page mask-border propose un exemple fonctionnel (utilisant les propriétés de masque de bordure préfixées obsolètes prises en charge par Chromium), afin que vous puissiez vous faire une idée de l'effet.
Spécifications
| Spécification |
|---|
| CSS Masking Module Level 1 # the-mask-border-width |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
mask-border - La propriété
mask-border-mode - La propriété
mask-border-outset - La propriété
mask-border-repeat - La propriété
mask-border-source