Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
mask-border
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Lapropriété raccourcieCSSmask-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 uncontexte 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 valeur30). On utilise la valeurround pour que le masque soit réparti également de part et d'autre.
<div> 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 |