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

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

ဝါကျဖွဲ့ပုံ

ရွေးချယ်သူ {
	border-image-source: url(ပုံလမ်းကြောင်း);
}

နမူနာ

border-image-source ဂုဏ်သတ္တိကို border-image-slice နှင့် တွဲဖက်၍ သတ်မှတ်သင့်သည်။

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

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

နမူနာ

border-image-slice ဂုဏ်သတ္တိ မသတ်မှတ်ထားပါက ပုံတစ်ခုလုံးသည် ထောင့်များပေါ်သို့ ရောက်ရှိသွားမည် (အဘယ့်ကြောင့်ဆိုသော် border-image-slice တန်ဖိုးအမှန် (default) မှာ 100% ဖြစ်သောကြောင့်)။

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

#elem {
	border-image-source: url("image.png");
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

နမူနာ

ပုံအစား linear gradient ကို သတ်မှတ်နိုင်သည်။

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-image-slice: 30;
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

နမူနာ

border-image-slice ဂုဏ်သတ္တိ မသတ်မှတ်ထားပါက gradient သည် ထောင့်များပေါ်သို့ ရောက်ရှိသွားမည် (အဘယ့်ကြောင့်ဆိုသော် border-image-slice တန်ဖိုးအမှန် (default) မှာ 100% ဖြစ်သောကြောင့်)။

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

နမူနာ

border-radius ဂုဏ်သတ္တိကို သတ်မှတ်ထားပါက နယ်နမိတ်၏ ထောင့်ဝိုင်းခြင်းများ မဖြစ်ပေါ်တော့ပါ (gradient အသုံးပြုသည့်အခါမှာလည်း ထိုနည်းတူစွာပင်)၊ သို့သော် အကျိုးသက်ရောက်မှုသည် စိတ်ဝင်စားဖွယ်ကောင်းနေဆဲဖြစ်သည်။

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

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

ဒါကိုလည်း ကြည့်ပါ

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