mask-border
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La propriété CSS mask-border
est une propriété raccourcie qui permet de créer un masque le long de la bordure d'un élément.
Propriétés détaillées correspondantes
Cette propriété est une propriété raccourcie pour les propriétés suivantes :
Syntaxe
/* source | slice */
mask-border: url("border-mask.png") 25;
/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;
/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;
/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;
/* Valeurs globales */
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: unset;
Valeurs
<'mask-border-source'>
-
L'image source. Voir
mask-border-source
. <'mask-border-slice'>
-
Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir
mask-border-slice
. <'mask-border-width'>
-
La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir
mask-border-width
. <'mask-border-outset'>
-
La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir
mask-border-outset
. <'mask-border-repeat'>
-
Cette valeur indique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir
mask-border-repeat
. <'mask-border-mode'>
-
Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir
mask-border-mode
.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
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 | pour chaque propriété individuelle de la propriété raccourcie :
|
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Crée un contexte d'empilement | oui |
Syntaxe formelle
mask-border =
<'mask-border-source'> ||
<'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
<'mask-border-repeat'> ||
<'mask-border-mode'>
<mask-border-source> =
none |
<image>
<mask-border-slice> =
[ <number> | <percentage> ]{1,4} fill?
<mask-border-width> =
[ <length-percentage> | <number> | auto ]{1,4}
<mask-border-outset> =
[ <length> | <number> ]{1,4}
<mask-border-repeat> =
[ stretch | repeat | round | space ]{1,2}
<mask-border-mode> =
luminance |
alpha
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Exemples
Image matricielle (bitmap)
Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :
Pour avoir un seul losange, on divise le carré en 3 (avec la valeur 30
). On utilise la valeur round
pour que le masque soit réparti également de part et d'autre.
Spécifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-border |
Compatibilité des navigateurs
BCD tables only load in the browser