Proprietatea mask-clip

Proprietatea mask-clip stabilește zona elementului în limitele căreia va fi afișată masca. Ea determină care părți ale elementului vor fi afectate de mascare și care vor rămâne vizibile fără modificări.

Sintaxă

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

Valori

Valoare	Descriere
`border-box`	Masca se aplică pe zona care include marginile elementului.
`padding-box`	Masca se aplică pe zona care include padding-ul, dar nu și marginile.
`content-box`	Masca se aplică doar pe conținutul elementului.
`margin-box`	Masca se aplică pe zona care include marginile (experimental).
`fill-box`	Masca se aplică la bounding box-ul obiectului (pentru SVG).
`stroke-box`	Masca se aplică la stroke bounding box (pentru SVG).
`view-box`	Masca se aplică la viewbox (pentru SVG).
`no-clip`	Masca nu este limitată de zona elementului.

Valoarea implicită: border-box.

Exemplu . Aplicarea mask-clip la diferite zone

Să comparăm diferite valori mask-clip pe un element cu margini și padding:

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

Exemplu . Utilizarea no-clip

Demonstrarea valorii no-clip, când masca iese în afara limitelor elementului:

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

Exemplu . SVG cu diferite valori mask-clip

Aplicarea diferitelor valori pe un element SVG:

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

Vezi și

proprietatea mask-origin,
definește poziția inițială a mastii
proprietatea mask-image,
specifică imaginea pentru mască
proprietatea mask,
prescurtare pentru toate proprietățile de mascare
proprietatea clip-path,
creează o zonă de decupare pentru element