--- title: mask-clip slug: Web/CSS/mask-clip tags: - CSS - Experimental - Propriété - Reference translation_of: Web/CSS/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.
{{cssinfo}}
/* 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;
Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
content-box
padding-box
border-box
margin-box
fill-box
stroke-box
view-box
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
{{csssyntax}}
#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; }
<div id="masked"></div>
{{EmbedLiveSample("Exemples", "220px", "250px")}}
Spécification | État | Commentaires |
---|---|---|
{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}} | {{Spec2("CSS Masks")}} | Définition initiale |
{{cssinfo}}
{{Compat("css.properties.mask-clip")}}