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

border-image-slice ဂုဏ်သတ္တိသည် ဘရောက်ဆာကို ပုံ၏အဘယ်အပိုင်းများသည် ထောင့်များအတွက်သွားမည်၊ အဘယ်အပိုင်းများသည် ဘေးဘက်များအတွက်သွားမည် (နှင့် မည်သည့်အပိုင်းသည် ဗဟိုဖြစ်မည်) ကို ညွှန်ပြသည်။ ထောင့်များအတွက် 4 အပိုင်းများသွားသည်၊ ဘေးဘက်များအတွက် 4 အပိုင်းများသွားပြီး တစ်ပိုင်း (ဗဟို) သည် အစိတ်အပိုင်း၏ နောက်ခံအတွက်သွားသည် (‌ရွေးချယ်ခွင့်ရှိသည်၊ သော့ချက်စကားလုံး fill)။

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

ဝါကျဖွဲ့ပုံ

<+css+> ရွေးချယ်သူ { border-image-slice: 1-မှ 4-အထိ ဂဏန်းများ | 1-မှ 4-အထိ ရာခိုင်နှုန်းများ; } <-css->

ဂဏန်းများနှင့် ရာခိုင်နှုန်းများနှင့်အတူ ခြားနားချက်ဖြင့် သော့ချက်စကားလုံး fill ရှိနိုင်သည်။

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
ရာခိုင်နှုန်းများ	ရာခိုင်နှုန်းများကို ပုံ၏အရွယ်အစားနှင့် နှိုင်းယှဉ်၍ တွက်ချက်သည်။ အလျားလိုက်များသည် အကျယ်နှင့် နှိုင်းယှဉ်၍၊ ဒေါင်လိုက်များ — အမြင့်နှင့် နှိုင်းယှဉ်၍။
ဂဏန်းများ	ဂဏန်းများသည် ပစ်ဆယ်များ (ရက်စ်တာပုံအတွက်) သို့မဟုတ် ကိုဩဒိနိတ်များ (ဗက်တာပုံအတွက်) ဖြစ်သည်။ ယူနစ်များကို မဖော်ပြပါ။
`fill`	စံအပြုအမူသည် ဗဟိုအပိုင်း၏ ပုံကို စွန့်ပစ်မည်ဟု ယူဆသည်။ ၎င်းကို အသုံးပြုရန် ဂဏန်းများ သို့မဟုတ် ရာခိုင်နှုန်းများနှင့်အတူ သော့ချက်စကားလုံး `fill` ကို အပို အသုံးပြုရန် လိုအပ်သည်။

ပါရာမီတာအရေအတွက်

အကွာအဝေးသည် 1, 2, 3 သို့မဟုတ် 4 ပါရာမီတာကို လက်ခံနိုင်သည်။ အကွာအဝေးအတွက် ယူနစ်များကို မရေးကြောင်း သတိပြုပါ (ဥပမာ၊ ရိုးရိုး 20, 20px မဟုတ်)။ ထူအရှည်ကို % ဖြင့်လည်း သတ်မှတ်နိုင်သည်။

ပါရာမီတာအရေအတွက်	ဖော်ပြချက်
`1`	ဘက်အားလုံးအတွက် တစ်ပြိုင်နက် ထူ။
`2`	1 2; - အပေါ် နှင့် အောက်အတွက် `1px`၊ ဘယ် နှင့် ညာအတွက် `2px`။
`3`	`1 2 3`; - အပေါ်အတွက် `1px`၊ ဘယ် နှင့် ညာအတွက် `2px`၊ အောက်အတွက် `3px`။
`4`	`1 2 3 4`; - အပေါ်အတွက် `1px`၊ ညာအတွက် `2px`၊ အောက်အတွက် `3px`၊ ဘယ်အတွက် `4px`။

စံတန်ဖိုး: 100%(?)။

ဥပမာ

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

ဥပမာ

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

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

ဤသည်ကိုလည်း ကြည့်ပါ

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