-webkit-mask-box-image
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété raccourcie CSS préfixée non standard -webkit-mask-box-image permet de définir l'image de masque pour la boîte de bordure d'un élément.
Note :
Cette propriété n'est pas standard et n'est pas en cours de normalisation. Il est recommandé d'utiliser la propriété mask-border à la place.
Propriétés constitutives
Cette propriété est une propriété abrégée pour les propriétés CSS suivantes :
Les valeurs incluent le <image> à utiliser comme bordure de masque, et éventuellement quatre valeurs de décalage de bordure et jusqu'à deux styles de répétition de bordure.
Syntaxe
/* par défaut */
-webkit-mask-box-image: none;
/* image */
-webkit-mask-box-image: url("image.png");
/* image edge-offset */
-webkit-mask-box-image: url("image.png") 10 20 20 10;
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px;
/* image repeat-style */
-webkit-mask-box-image: url("image.png") space repeat;
/* image edge-offset repeat-style */
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px space repeat;
/* Valeurs globales */
-webkit-mask-box-image: inherit;
-webkit-mask-box-image: initial;
-webkit-mask-box-image: revert;
-webkit-mask-box-image: revert-layer;
-webkit-mask-box-image: unset;
Valeurs
<image>-
L'emplacement de la ressource image à utiliser comme image de masque,
<gradient>, ou toute autre valeur<image>. none-
Ce mot-clé indique que la boîte de bordure n'a pas de masque.
<length>-
Le décalage à appliquer à l'image de masque. Voir
<length>pour les unités possibles. <percentage>-
Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).
<number>-
La taille du décalage de l'image de masque en pixels.
repeat-
L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.
stretch-
L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.
round-
L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.
space-
L'image de masque est répétée autant de fois que possible sans être étirée. Il n'y a pas d'image de masque partielle à la fin de la boîte de bordure.
Les valeurs de décalage, ou décalages de bord, définissent les distances depuis les bords supérieur, droit, inférieur et gauche de l'image, dans cet ordre. Les valeurs peuvent être définies comme <length>, <number> ou <percentage>, les nombres étant interprétés comme des longueurs en pixels.
Les styles de répétition de bordure, lorsqu'ils sont inclus, sont interprétés dans l'ordre <repeat-x> <repeat-y>. Si une seule valeur est déclarée, elle s'applique aux deux axes. Bien que similaire à background-repeat, les valeurs cover et contain ne sont pas prises en charge.
Définition formelle
- Valeur initiale :
none - Appliqué à : tous les éléments
- Hérité : non
- Valeur calculée : comme la valeur définie
Syntaxe formelle
-webkit-mask-box-image =
<mask-image-source> [ <mask-image-offset>{4} <mask-border-repeat>{1,2} ]
Exemples
Définir une image
.exemple-un {
-webkit-mask-box-image: url("mask.png");
}
Définir un décalage et remplir une image
.exemple-deux {
-webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
Spécifications
Cette propriété ne fait partie d'aucun standard.
Compatibilité des navigateurs
Voir aussi
- La propriété
mask-border - La propriété
border-image - La référence CSS
-webkit-mask-box-imagepour Safari (angl.)