mask-border
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété raccourcie CSS mask-border permet de créer un masque le long de la bordure d'un élément.
Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS 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: revert-layer;
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> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Exemples
Définir une 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.
<div class="masked">
Cet élément est entouré par une bordure de masque basée sur une image
matricielle ! Plutôt sympa, n'est-ce pas ?
</div>
.masked {
width: 200px;
background-color: lavender;
border: 18px solid salmon;
padding: 10px;
-webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* tranche */
20px / /* largeur */
1px /* décalage */
round; /* répétition */
mask-border:
url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
30 fill / /* tranche */
20px / /* largeur */
1px /* décalage */
round; /* répétition */
}
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border |