বৈশিষ্ট্য mask-clip

বৈশিষ্ট্য mask-clip একটি এলিমেন্টের সেই সীমানা নির্ধারণ করে যার মধ্যে মাস্ক প্রদর্শিত হবে। এটি নির্ধারণ করে যে এলিমেন্টের কোন অংশগুলি মাস্কিং দ্বারা প্রভাবিত হবে এবং কোন অংশগুলি পরিবর্তন ছাড়াই দৃশ্যমান থাকবে।

সিনট্যাক্স

সিলেক্টর {
	mask-clip: মান | no-clip;
}

মানসমূহ

মান	বর্ণনা
`border-box`	মাস্ক এলিমেন্টের সীমানা সহ সম্পূর্ণ এলাকায় প্রয়োগ করা হয়।
`padding-box`	মাস্ক প্যাডিং সহ এলাকায় প্রয়োগ করা হয়, কিন্তু সীমানা বাদ দিয়ে।
`content-box`	মাস্ক শুধুমাত্র এলিমেন্টের কন্টেন্টে প্রয়োগ করা হয়।
`margin-box`	মাস্ক মার্জিন সহ এলাকায় প্রয়োগ করা হয় (পরীক্ষামূলক)।
`fill-box`	মাস্ক অবজেক্টের বাউন্ডিং বক্সে প্রয়োগ করা হয় (SVG এর জন্য)।
`stroke-box`	মাস্ক স্ট্রোক বাউন্ডিং বক্সে প্রয়োগ করা হয় (SVG এর জন্য)।
`view-box`	মাস্ক ভিউবক্সে প্রয়োগ করা হয় (SVG এর জন্য)।
`no-clip`	মাস্ক এলিমেন্টের সীমানা দ্বারা সীমাবদ্ধ নয়।

ডিফল্ট মান: 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 ব্যবহার

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-image,
মাস্কের জন্য ইমেজ সেট করে
বৈশিষ্ট্য mask,
সমস্ত মাস্কিং বৈশিষ্ট্যের জন্য সংক্ষিপ্ত রূপ
বৈশিষ্ট্য clip-path,
এলিমেন্টের জন্য ক্লিপিং এরিয়া তৈরি করে