Eigenschaft mask-clip

Die Eigenschaft mask-clip legt den Bereich eines Elements fest, innerhalb dessen die Maske angezeigt wird. Sie bestimmt, welche Teile des Elements von der Maskierung betroffen sind und welche sichtbar und unverändert bleiben.

Syntax

Selektor {
	mask-clip: Wert | no-clip;
}

Werte

Wert	Beschreibung
`border-box`	Die Maske wird auf den Bereich einschließlich der Ränder des Elements angewendet.
`padding-box`	Die Maske wird auf den Bereich einschließlich des Innenabstands (Padding), aber ohne die Ränder angewendet.
`content-box`	Die Maske wird nur auf den Inhaltsbereich des Elements angewendet.
`margin-box`	Die Maske wird auf den Bereich einschließlich des Außenabstands (Margin) angewendet (experimentell).
`fill-box`	Die Maske wird auf die Bounding Box des Objekts angewendet (für SVG).
`stroke-box`	Die Maske wird auf die Stroke Bounding Box angewendet (für SVG).
`view-box`	Die Maske wird auf die Viewbox angewendet (für SVG).
`no-clip`	Die Maske ist nicht auf den Bereich des Elements beschränkt.

Standardwert: border-box.

Beispiel . Anwendung von mask-clip auf verschiedene Bereiche

Vergleich verschiedener mask-clip-Werte auf einem Element mit Rändern und Abständen:

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

Beispiel . Verwendung von no-clip

Demonstration des no-clip-Werts, bei dem die Maske über die Grenzen des Elements hinausgeht:

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

Beispiel . SVG mit verschiedenen mask-clip-Werten

Anwendung verschiedener Werte auf ein 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>

Siehe auch

Eigenschaft mask-origin,
definiert die Ausgangsposition der Maske
Eigenschaft mask-image,
legt das Bild für die Maske fest
Eigenschaft mask,
Kurzform für alle Maskierungseigenschaften
Eigenschaft clip-path,
erstellt einen Beschneidungspfad für ein Element