Egenskapen mask-clip

Egenskapen mask-clip setter området til et element innenfor hvilket masken vil vises. Den bestemmer hvilke deler av elementet som vil bli påvirket av maskering, og hvilke som forblir synlige uten endringer.

Syntaks

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

Verdier

Verdi	Beskrivelse
`border-box`	Masken brukes på området, inkludert elementets kanter.
`padding-box`	Masken brukes på området, inkludert padding, men ikke kanter.
`content-box`	Masken brukes kun på elementets innhold.
`margin-box`	Masken brukes på området, inkludert margin (eksperimentelt).
`fill-box`	Masken brukes på objektets bounding box (for SVG).
`stroke-box`	Masken brukes på stroke bounding box (for SVG).
`view-box`	Masken brukes på viewbox (for SVG).
`no-clip`	Masken er ikke begrenset til elementets område.

Standardverdi: border-box.

Eksempel . Bruk av mask-clip på forskjellige områder

La oss sammenligne forskjellige mask-clip-verdier på et element med kanter og marger:

<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 . Bruk av no-clip

Demonstrasjon av no-clip-verdien, der masken går utover elementets grenser:

<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 forskjellige mask-clip-verdier

Bruk av forskjellige verdier 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å

egenskapen mask-origin,
definerer maskens opprinnelige posisjon
egenskapen mask-image,
angir bildet for masken
egenskapen mask,
shorthand for alle maskeringsegenskaper
egenskapen clip-path,
oppretter et klippeområde for et element