mask-clip ගුණය

mask-clip ගුණය මූලද්‍රව්‍යයක් ඇතුළත mask ප්‍රදර්ශනය වන ප්‍රදේශය සකසයි. මූලද්‍රව්‍යයේ කුමන කොටස් mask කිරීමෙන් ප්‍රභාවිත වනු ඇතිද සහ කුමන කොටස් වෙනසකින් තොරව දෘශ්‍යමාන වේද යන්න එය නිර්වචනය කරයි.

වාක්‍ය රචනය

තෝරන්නා {
	mask-clip: අගය | no-clip;
}

අගයන්

අගය	විස්තරය
`border-box`	Mask මූලද්‍රව්‍යයේ දාර ඇතුළුව ප්‍රදේශයට යොදයි.
`padding-box`	Mask පැඩිං ඇතුළත් ප්‍රදේශයට යොදයි, නමුත් දාර නොවේ.
`content-box`	Mask මූලද්‍රව්‍යයේ අන්තර්ගතයට පමණක් යොදයි.
`margin-box`	Mask මාජින් ඇතුළත් ප්‍රදේශයට යොදයි (පරීක්ෂණාත්මක).
`fill-box`	Mask වස්තුවේ bounding box වෙත යොදයි (SVG සඳහා).
`stroke-box`	Mask stroke bounding box වෙත යොදයි (SVG සඳහා).
`view-box`	Mask viewbox වෙත යොදයි (SVG සඳහා).
`no-clip`	Mask මූලද්‍රව්‍යයේ ප්‍රදේශයෙන් සීමා නොවේ.

පෙරනිමි අගය: border-box.

උදාහරණය . විවිධ mask-clip අගයන් යෙදීම

දාර සහ අතර ඉඩ සහිත මූලද්‍රව්‍යයක් මත විවිධ mask-clip අගයන් සංසන්දනය කරමු:

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

උදාහරණය . no-clip භාවිතය

Mask මූලද්‍රව්‍යයේ සීමාවන් මඟහරින විට no-clip අගය නිරූපණය කිරීම:

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

උදාහරණය . විවිධ mask-clip අගයන් සහිත SVG

විවිධ අගයන් 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>

මෙයද බලන්න

mask-origin ගුණය,
mask හි මුල් පිහිටුම නිර්වචනය කරයි
mask-image ගුණය,
mask සඳහා රූපයක් නියම කරයි
mask ගුණය,
mask සියලු ගුණ සඳහා කෙටි යෙදුමකි
clip-path ගුණය,
මූලද්‍රව්‍යයක් සඳහා clip කිරීමේ ප්‍රදේශයක් නිර්මාණය කරයි