border-image-outset ဂုဏ်သတ္တိ

border-image-outset ဂုဏ်သတ္တိသည် နယ်နိမိတ်ကို အရာဝတ္ထု၏ အပြင်ဘက်သို့ ရွှေ့ထုတ်ခွင့်ပြုသည်။ တန်ဖိုးအဖြစ် ယူနစ်ဖော်ပြချက်မပါသော နံပါတ်တစ်ခု သို့မဟုတ် ရာခိုင်နှုန်းမှလွဲ၍ အရွယ်အစားများအတွက် မည်သည့်ယူနစ်မဆို ကို သတ်မှတ်ပေးရသည်။ ယူနစ်မပါသော နံပါတ်တစ်ခု သတ်မှတ်ပေးပါက၊ ၎င်းသည် border-width ဂုဏ်သတ္တိ၏ တန်ဖိုးများကို မြှောက်ပေးမည့် ဆခွဲကိန်း ဖြစ်သည်။ အနုတ်လက္ခဏာ တန်ဖိုးများကို ထောက်ပံ့မထားပါ။

နယ်နိမိတ်ပုံရိပ်များနှင့်ပတ်သက်သည့် အသေးစိတ်အချက်အလက်များအတွက် border-image ဂုဏ်သတ္တိကို ကြည့်ပါ။

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

ရွေးချယ်သူ {
	border-image-outset: အပေါင်းကိန်း;
}

နမူနာ . ကိန်း

အရာဝတ္ထုပေါ်သို့ မောက်စ်ဖြင့် နှိုက်သည့်အခါ border-image-outset ၏ တန်ဖိုးကို 3 အဖြစ် သတ်မှတ်ပါမည်။ ထိုသို့ဆိုလျှင် နယ်နိမိတ်သည် 26px*3 - border-width ဖြင့် သတ်မှတ်ထားသော ၎င်း၏အကျယ်၏ 3 ဆ အကွာအဝေးသို့ ရွေ့သွားမည်ဖြစ်သည်။

<div id="elem"></div>

#elem:hover {
	border-image-outset: 3;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 100px auto;
}

နမူနာ . ပစ်ကယ်များ

အရာဝတ္ထုပေါ်သို့ မောက်စ်ဖြင့် နှိုက်သည့်အခါ border-image-outset ၏ တန်ဖိုးကို 30px အဖြစ် သတ်မှတ်ပါမည်။ ထိုသို့ဆိုလျှင် နယ်နိမိတ်သည် 30px အကွာအဝေးသို့ ရွေ့သွားမည်ဖြစ်သည်။

<div id="elem"></div>

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 50px auto;
}

ဤအရာကိုလည်း ကြည့်ပါ

border-image ဂုဏ်သတ္တိ,
သည် နယ်နိမိတ်ပုံရိပ်အတွက် အတိုကောက်ဖော်ပြချက် ဖြစ်သည်။
border-image-source ဂုဏ်သတ္တိ,
သည် နယ်နိမိတ်အတွက် ပုံရိပ်လမ်းကြောင်းကို သတ်မှတ်ပေးသည်။
border-image-slice ဂုဏ်သတ္တိ,
သည် နယ်နိမိတ်အတွက် ပုံရိပ်ကို ပိုင်းခြားဖြတ်တောက်ခြင်း ဖြစ်သည်။
border-image-repeat ဂုဏ်သတ္တိ,
သည် နယ်နိမိတ်အတွက် ပုံရိပ်ကို ထပ်ခါတလဲလဲပြုခြင်း ဖြစ်သည်။
border-image-width ဂုဏ်သတ္တိ,
သည် နယ်နိမိတ်အတွက် ပုံရိပ်၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။