Propriété mask-clip

La propriété mask-clip définit la zone de l'élément dans laquelle le masque sera affiché. Elle détermine quelles parties de l'élément seront affectées par le masquage et lesquelles resteront visibles sans modification.

Syntaxe

sélecteur {
	mask-clip: valeur | no-clip;
}

Valeurs

Valeur	Description
`border-box`	Le masque est appliqué à la zone incluant les bordures de l'élément.
`padding-box`	Le masque est appliqué à la zone incluant le padding, mais pas les bordures.
`content-box`	Le masque est appliqué uniquement au contenu de l'élément.
`margin-box`	Le masque est appliqué à la zone incluant la marge (expérimental).
`fill-box`	Le masque est appliqué à la bounding box de l'objet (pour SVG).
`stroke-box`	Le masque est appliqué à la stroke bounding box (pour SVG).
`view-box`	Le masque est appliqué à la viewbox (pour SVG).
`no-clip`	Le masque n'est pas limité à la zone de l'élément.

Valeur par défaut : border-box.

Exemple . Application de mask-clip à différentes zones

Comparons différentes valeurs de mask-clip sur un élément avec des bordures et des marges intérieures :

<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

.box {
	width: 200px;
	height: 100px;
	margin: 20px;
	padding: 20px;
	border: 10px dashed black;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, black, transparent);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	display: inline-block;
}

.border-box {
	mask-clip: border-box;
}

.padding-box {
	mask-clip: padding-box;
}

.content-box {
	mask-clip: content-box;
}

Exemple . Utilisation de no-clip

Démonstration de la valeur no-clip, lorsque le masque dépasse les limites de l'élément :

<div id="elem"></div>

#elem {
	width: 200px;
	height: 200px;
	background: linear-gradient(45deg, red, blue);
	mask-image: radial-gradient(circle, black 50%, transparent 70%);
	mask-size: 300px 300px;
	mask-position: center;
	mask-clip: no-clip;
	border: 2px solid black;
}

Exemple . SVG avec différentes valeurs de mask-clip

Application de différentes valeurs à un élément SVG :

<svg width="400" height="200">
	<defs>
		<mask id="mask1" maskContentUnits="objectBoundingBox">
			<rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
		</mask>
	</defs>
	
	<rect x="10" y="10" width="180" height="180" fill="blue" 
		mask="url(#mask1)" mask-clip="fill-box"/>
		
	<rect x="210" y="10" width="180" height="180" fill="red" 
		mask="url(#mask1)" mask-clip="view-box"/>
</svg>

Voir aussi

propriété mask-origin,
définit la position d'origine du masque
propriété mask-image,
définit l'image du masque
propriété mask,
raccourci pour toutes les propriétés de masquage
propriété clip-path,
crée une zone de découpe pour l'élément