ဂုဏ်သတ္တိ mask-clip

mask-clip ဂုဏ်သတ္တိသည် မျက်နှာဖုံးပေါ်လာမည့် အစိတ်အပိုင်း၏ နယ်ပယ်ကို သတ်မှတ်ပေးသည်။ ၎င်းသည် အစိတ်အပိုင်း၏ ဘယ်အပိုင်းများသည် မျက်နှာဖုံးခြင်းဖြင့် ထိခိုက်မည်နှင့် ဘယ်အပိုင်းများသည် မူလအတိုင်း မပြောင်းလဲဘဲ မြင်နိုင်မည်ကို သတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့စည်းပုံ

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

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`border-box`	မျက်နှာဖုံးကို အစိတ်အပိုင်း၏ နယ်နိမိတ်များအပါအဝင် ဧရိယာသို့ သက်ရောက်စေသည်။
`padding-box`	မျက်နှာဖုံးကို padding ပါဝင်သော်လည်း နယ်နိမိတ်မပါသော ဧရိယာသို့ သက်ရောက်စေသည်။
`content-box`	မျက်နှာဖုံးကို အစိတ်အပိုင်း၏ ပါဝင်သည်များသာ သက်ရောက်စေသည်။
`margin-box`	မျက်နှာဖုံးကို margin ပါဝင်သော ဧရိယာသို့ သက်ရောက်စေသည် (စမ်းသပ်ဆဲ)။
`fill-box`	မျက်နှာဖုံးကို အရာဝတ္ထု၏ bounding box သို့ သက်ရောက်စေသည် (SVG အတွက်)။
`stroke-box`	မျက်နှာဖုံးကို stroke bounding box သို့ သက်ရောက်စေသည် (SVG အတွက်)။
`view-box`	မျက်နှာဖုံးကို viewbox သို့ သက်ရောက်စေသည် (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 ဂုဏ်သတ္တိ,
အစိတ်အပိုင်းအတွက် ဖြတ်တောက်မှုဧရိယာတစ်ခုကို ဖန်တီးပေးသည်