Eienskap mask-clip

Die eienskap mask-clip stel die area van 'n element vas binne welke die masker vertoon sal word. Dit bepaal watter dele van die element deur maskering geraak sal word en watter dele sigbaar sal bly sonder veranderinge.

Sintaksis

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

Waardes

Waarde	Beskrywing
`border-box`	Die masker word toegepas op die area, insluitend die element se grense.
`padding-box`	Die masker word toegepas op die area, insluitend padding, maar nie die grense nie.
`content-box`	Die masker word slegs op die element se inhoud toegepas.
`margin-box`	Die masker word toegepas op die area, insluitend margin (eksperimenteel).
`fill-box`	Die masker word toegepas op die begrensingskas van die objek (vir SVG).
`stroke-box`	Die masker word toegepas op die stroke begrensingskas (vir SVG).
`view-box`	Die masker word toegepas op die viewbox (vir SVG).
`no-clip`	Die masker word nie deur die element se area beperk nie.

Verstekwaarde: border-box.

Voorbeeld . Toepassing van mask-clip op verskillende areas

Vergelyk verskillende mask-clip waardes op 'n element met grense en spasiering:

<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

Demonstrasie van die no-clip waarde, wanneer die masker buite die element se grense strek:

<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 verskillende mask-clip waardes

Toepassing van verskillende waardes op 'n 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>

Kyk ook na

eienskap mask-origin,
bepaal die masker se oorsprongsposisie
eienskap mask-image,
stel die beeld vir die masker
eienskap mask,
verkorting vir alle masker eienskappe
eienskap clip-path,
skep 'n knippad area vir 'n element