We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui -webkit- ?53 Non Oui -webkit- Oui -webkit-
border1 ? ? Non Oui4
content1 ? ? Non Oui4
padding1 ? ? Non Oui4
text1 ? ? Non Oui4
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? ?53 ? ? ?
border2.1 ? ? ? ?3.2 ?
content2.1 ? ? ? ?3.2 ?
padding2.1 ? ? ? ?3.2 ?
text2.1 ? ? ? ?3.2 ?

Étiquettes et contributeurs liés au document

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