Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété mask-clip définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.

Valeur initialeborder-box
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éenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Syntaxe

/* Valeurs de type <geometry-box> */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* Valeurs avec un mot-clé */
mask-clip: no-clip;

/* Valeurs multiples */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/* Mots-clés non-standards */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Valeurs globales */
mask-clip: inherit;
mask-clip: initial;
mask-clip: unset;

Valeur initialeborder-box
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éenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Syntaxe

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

Valeurs

content-box
La partie qui est « peinte » est rognée sur la boîte de contenu.
padding-box
La partie qui est « peinte » est rognée sur la boîte de padding.
border-box
La partie qui est « peinte » est rognée sur la boîte de bordure.
margin-box
La partie qui est « peinte » est rognée sur la boîte de marge.
fill-box
La partie qui est « peinte » est rognée sur la boîte contenant l'objet.
stroke-box
La partie qui est « peinte » est rognée sur la boîte contenant le contour.
view-box
C'est le viewport du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée le viewport, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut viewBox.
no-clip
La partie qui est « peinte » n'est pas rognée.

Syntaxe formelle

[ <geometry-box> | no-clip ]#


<geometry-box> = <shape-box> | fill-box | stroke-box | view-box


<shape-box> = <box> | margin-box


<box> = border-box | padding-box | content-box

Exemples

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 20px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); 
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-clip: border;
  mask-clip: border-box;
}

HTML

<div id="masked"></div>

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-clip' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 53IE Aucun support NonOpera Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 53Opera Android ? Safari iOS ? Samsung Internet Android ?
border
ExpérimentaleNon-standard
Chrome Support complet 1Edge ? Firefox ? IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet 2Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?
content
ExpérimentaleNon-standard
Chrome Support complet 1Edge ? Firefox ? IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet 2Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?
padding
ExpérimentaleNon-standard
Chrome Support complet 1Edge ? Firefox ? IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet 2Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?
text
ExpérimentaleNon-standard
Chrome Support complet 1Edge ? Firefox ? IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet 2Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,