mask-clip

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;

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
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mask-clip
Expérimentale
Chrome Support complet 1
Préfixée
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Support complet 53
Support complet 53
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 2
Préfixée
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 18
Préfixée
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 53
Support complet 53
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
border
ExpérimentaleNon-standard
Chrome Support complet 1Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 4WebView Android Support complet 2Chrome Android Support complet 18Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
content
ExpérimentaleNon-standard
Chrome Support complet 1Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 4WebView Android Support complet 2Chrome Android Support complet 18Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
padding
ExpérimentaleNon-standard
Chrome Support complet 1Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 4WebView Android Support complet 2Chrome Android Support complet 18Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
text
ExpérimentaleNon-standard
Chrome Support complet 1Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 4WebView Android Support complet 2Chrome Android Support complet 18Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
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.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
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.