Egenskaben mask-clip

Egenskaben mask-clip indstiller området af et element, inden for hvilket masken vil blive vist. Den bestemmer, hvilke dele af elementet der vil blive påvirket af maskeringen, og hvilke der forbliver synlige uden ændringer.

Syntaks

selektor {
	mask-clip: værdi | no-clip;
}

Værdier

Værdi	Beskrivelse
`border-box`	Masken anvendes på området, inklusive elementets kanter.
`padding-box`	Masken anvendes på området, inklusive padding, men ikke kanter.
`content-box`	Masken anvendes kun på elementets indhold.
`margin-box`	Masken anvendes på området, inklusive margin (eksperimentel).
`fill-box`	Masken anvendes på objektets bounding box (til SVG).
`stroke-box`	Masken anvendes på stroke bounding box (til SVG).
`view-box`	Masken anvendes på viewbox (til SVG).
`no-clip`	Masken er ikke begrænset af elementets område.

Standardværdi: border-box.

Eksempel . Anvendelse af mask-clip på forskellige områder

Sammenlign forskellige mask-clip-værdier på et element med kanter og polstring:

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

Eksempel . Brug af no-clip

Demonstration af no-clip-værdien, hvor masken går ud over elementets grænser:

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

Eksempel . SVG med forskellige mask-clip-værdier

Anvendelse af forskellige værdier på et 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>

Se også

egenskaben mask-origin,
definerer maskens oprindelige position
egenskaben mask-image,
angiver billedet til masken
egenskaben mask,
genvej for alle maskingsegenskaber
egenskaben clip-path,
opretter en udklipningssti for elementet