Eigenschap mask-clip

De eigenschap mask-clip bepaalt het gebied van een element waarbinnen het masker wordt weergegeven. Het bepaalt welke delen van het element worden beïnvloed door maskering en welke zichtbaar blijven zonder wijzigingen.

Syntaxis

selector {
	mask-clip: waarde | no-clip;
}

Waarden

Waarde	Beschrijving
`border-box`	Het masker wordt toegepast op het gebied, inclusief de randen van het element.
`padding-box`	Het masker wordt toegepast op het gebied, inclusief de opvulling (padding), maar niet de randen.
`content-box`	Het masker wordt alleen toegepast op de inhoud van het element.
`margin-box`	Het masker wordt toegepast op het gebied, inclusief de marge (experimenteel).
`fill-box`	Het masker wordt toegepast op de begrenzingskader (bounding box) van het object (voor SVG).
`stroke-box`	Het masker wordt toegepast op het stroke begrenzingskader (voor SVG).
`view-box`	Het masker wordt toegepast op het viewbox (voor SVG).
`no-clip`	Het masker wordt niet beperkt tot het gebied van het element.

Standaardwaarde: border-box.

Voorbeeld . Toepassing van mask-clip op verschillende gebieden

Vergelijk verschillende mask-clip waarden op een element met randen en opvulling:

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

Voorbeeld . Gebruik van no-clip

Demonstratie van de no-clip waarde, waarbij het masker buiten de grenzen van het element komt:

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

Voorbeeld . SVG met verschillende mask-clip waarden

Toepassing van verschillende waarden op een SVG-element:

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

Zie ook

eigenschap mask-origin,
bepaalt de oorspronkelijke positie van het masker
eigenschap mask-image,
stelt de afbeelding voor het masker in
eigenschap mask,
afkorting voor alle maskeringseigenschappen
eigenschap clip-path,
creëert een afknipgebied voor een element