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-source
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS mask-border-source définit l'image à utiliser pour créer le masque de bordure d'un élément.
C'est la propriété mask-border-slice qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.
Syntaxe
css
/* Valeur avec un mot-clé */
mask-border-source: none;
/* Valeurs de type <image> */
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);
/* Valeurs globales */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: unset;
Valeurs
Définition formelle
| Valeur initiale | none |
|---|---|
| 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 |
| Valeur calculée | comme spécifié mais avec les valeurs url() rendues absolues |
| Type d'animation | discrète |
Syntaxe formelle
mask-border-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color> ? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
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
Voir la page mask-border.
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-source |
Compatibilité des navigateurs
Chargement...