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

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

ဝါကျဖွဲ့ပုံ

selector {
	border-image: url(ပုံရိပ်လမ်းကြောင်း) အကွာအဝေး/အကျယ်/ခြားနားချက် ပြန်လည်ထပ်ခြင်း;
}

ဖော်ပြချက်

နယ်နိမိတ်သို့အသုံးပြုလိုသော ပုံရိပ်ကို အထူးနည်းလမ်းဖြင့် ပုံဖော်ထားရမည်။ ထောင့်များအတွက် 4 ခုသော ပုံငယ်လေးများနှင့် ဘေးဘက်များအတွက် 4 ခုသော ပုံရိပ်များ ဖြစ်ရပါမည်။ ထိုကဲ့သို့သော ပုံရိပ်ပုံစံ။

ဤကိစ္စတွင် အလယ်ဗဟိုအပိုင်းကို အဖြူရောင်ထားရှိထားသည် (အကြောင်းမှာ ၎င်းသည် အစိတ်အပိုင်း၏နောက်ခံနှင့် ထပ်မကျော်စေလိုသောကြောင့်ဖြစ်သည်)။ အလယ်ဗဟိုအပိုင်း ဖြည့်ထားသော ပုံရိပ်ဥပမာ။

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

ပုံရိပ်ကို အောက်ပါအတိုင်း အပိုင်းများအဖြစ် "ဖြတ်တောက်"ထားသည်။ slice တန်ဖိုးအတွက် တစ်ခုမှ လေးခုအထိ တန်ဖိုးများကို သတ်မှတ်ပေးရသည်။ ဥပမာတစ်ခုဖြင့် လေ့လာကြည့်ပါမည်။ အောက်ပါတန်ဖိုးများကို သတ်မှတ်ထားသည်ဟု ယူဆပါစို့။ 10 20 30 40 ( ပစ်ဆယ် px များကို မဖော်ပြပါ၊ ၎င်းမှာ ပုံရိပ်သည် rasterized သို့မဟုတ် vector ဖြစ်နိုင်သောကြောင့်ဖြစ်သည်)။ တန်ဖိုးများသည် အောက်ပါအတိုင်း ညွှန်ပြသည်။ 10 ဖြတ်တောက်မည် အပေါ်မှ၊ 20 ဖြတ်တောက်မည် ညာဘက်မှ၊ 30 ဖြတ်တောက်မည် အောက်မှ၊ 40 ဖြတ်တောက်မည် ဘယ်ဘက်မှ။ ပုံရိပ်၏မည်သည့်အပိုင်းသည် အပေါ်ဘယ်ဘက်ထောင့်သို့ သွားမည်နည်း။ ၎င်းသည် အပိုင်းဖြစ်လာမည်။ 10 အပေါ်မှ၊ 40 ဘယ်ဘက်မှ။ အပေါ်ညာဘက်ထောင့်သို့ 10 အပေါ်မှ၊ 20 ညာဘက်မှ သွားလိမ့်မည်။ ထိုနည်းအတိုင်းပင် ဖြစ်သည်။

မကြာခဏဆိုသလို ပုံရိပ်သည် ညီမျှသည် (အထက်ပါစိန်ပုံများ ကဲ့သို့) နှင့် ထောင့်များအတွက် အပိုင်းများတူညီစွာဖြတ်ရန် လိုအပ်သည်။ ထိုကိစ္စတွင် တစ်ခုတည်းသော တန်ဖိုးကိုသာ ဖော်ပြပြီး၊ ၎င်းသည် အားလုံးသောဘက်များမှ အကွာအဝေးတူညီစွာကို သတ်မှတ်ပေးလိမ့်မည်။ လိမ္မော်ရောင်စိန်ပုံများကို ဖြတ်ရန် slice ကို 26 တွင်ဖော်ပြပါမည် (အဘယ်ကြောင့်ဆိုသော် လိမ္မော်ရောင်စိန်ပုံ၏ အရွယ်အစားသည် 26px 26px ဖြစ်သည်)။ အဝါရောင်စိန်ပုံများသည် နယ်နိမိတ်မျဉ်းကြောင်းများအပေါ်သို့ ကျရောက်ပြီး အောက်ပါအတိုင်းဖြစ်လာလိမ့်မည်။ ဘလောက်တစ်ခုလုံးတလျှောက် ဆန့်ထွက်သွားခြင်း သို့မဟုတ် နယ်နိမိတ်တလျှောက် ထပ်ခါထပ်ခါဖြစ်သွားခြင်း ( repeat တန်ဖိုးပေါ်မူတည်သည်)။

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	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 ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ရပါမည်။

ရှေးဟောင်းဘရောက်ဇာများအသုံးပြုသူများ (သို့မဟုတ် ပုံရိပ်များကို ပိတ်ထားသူများ) သည် စံနယ်နိမိတ်ကို မြင်ရလိမ့်မည်၊ ၎င်းကို border တွင်သတ်မှတ်ထားပြီး ထို့ကြောင့် သင့်လျော်သောစတိုင်နှင့် အရောင်ကို ပေးသင့်သည်။

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
url(ပုံရိပ်လမ်းကြောင်း)	ပုံရိပ်လမ်းကြောင်း။ အသေးစိတ်အတွက် `border-image-source` ကိုကြည့်ပါ။
အကွာအဝေး	ဘရောက်ဇာကို ပုံရိပ်၏မည်သည့်အပိုင်းများက ထောင့်များသို့သွားမည်၊ မည်သည့်အပိုင်းများက ဘေးဘက်များသို့သွားမည် (နှင့် မည်သည့်အပိုင်းက အလယ်ဗဟိုဖြစ်မည်) ဆိုသည်ကို ညွှန်ပြသည်။ ဖြစ်နိုင်သောတန်ဖိုးများ: `1` မှ `4` ဂဏန်းများ \| `1` မှ `4` ရာခိုင်နှုန်းများ။ ကြားခံနေရာဖြင့် ခွဲခြားပြီး `fill` သော့ချက်စကားလုံးကို ဂဏန်းများ သို့မဟုတ် ရာခိုင်နှုန်းများအပြင် ထည့်သွင်းနိုင်သည်။ အသေးစိတ်အတွက် `border-image-slice` ကိုကြည့်ပါ။
အကျယ်	ဂုဏ်သတ္တိသည် နယ်နိမိတ်၏မြင်နိုင်သောအပိုင်း၏အကျယ်ကို ထိန်းချုပ်သည်၊ ၎င်းကို စကေးချဲ့ပေးသည်။ ဤတန်ဖိုးသည် `border-width` ၏အကျယ်ထက် ကြီးမားပါက နယ်နိမိတ်ပုံရိပ်သည် အကြောင်းအရာထဲသို့ ကျူးကျော်ဝင်ရောက်သွားလိမ့်မည်။ ဖြစ်နိုင်သောတန်ဖိုးများ: CSS ယူနစ်များ \| ရာခိုင်နှုန်းများ \| ဂဏန်း \| `auto`။ အသေးစိတ်အတွက် `border-image-width` ကိုကြည့်ပါ။
ခြားနားချက်	စိတ်ဝင်စားဖွယ်ကောင်းသော ဂုဏ်သတ္တိ၊ ၎င်းသည် နယ်နိမိတ်ကို အစိတ်အပိုင်း၏အကန့်အသတ်များအပြင်သို့ ရွှေ့ပြောင်းခွင့်ပြုသည်။ အနှုတ်တန်ဖိုးများကို မထောက်ပံ့ပါ။ ဖြစ်နိုင်သောတန်ဖိုးများ: CSS ယူနစ်များ (% (?) မှလွဲ၍) \| အပေါင်းဂဏန်း \| auto. အသေးစိတ်အတွက် `border-image-outset` ကိုကြည့်ပါ။
ပြန်လည်ထပ်ခြင်း	နယ်နိမိတ်များပေါ်တွင် ပုံရိပ်ကို မည်သို့ထပ်ခြင်းကို သတ်မှတ်ပေးသည် (ထောင့်များပေါ်တွင်မဟုတ်)။ ကြွေပြားခင်းခြင်း သို့မဟုတ် ဆန့်ထုတ်ခြင်း။ ဖြစ်နိုင်သောတန်ဖိုးများ: `stretch` \| `repeat` \| `round` \| `space`။ အသေးစိတ်အတွက် `border-image-repeat` ကိုကြည့်ပါ။

စံထားရှိသောတန်ဖိုး။ none 100%/1/0 stretch (url(ပုံရိပ်လမ်းကြောင်း) အကွာအဝေး/အကျယ်/ခြားနားချက် ပြန်လည်ထပ်ခြင်း)။

ဥပမာ . border-image-repeat: repeat တန်ဖိုး

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

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

ဥပမာ . border-image-repeat: stretch တန်ဖိုး

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

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

ဥပမာ . border-image-repeat: round တန်ဖိုး

လက်ရှိပုံမှန်အနေအထားတွင် သတ်မှတ်ထားသည်မှာ repeat တန်ဖိုးဖြစ်ပြီး၊ ကြွက်ညွှန်ကို ရွှေ့သောအခါ - round တန်ဖိုးဖြစ်သည်။ ကြွက်ညွှန်မရွှေ့မီ နယ်နိမိတ်တွင် အပြည့်အဝမဟုတ်သော စိန်ပုံအရေအတွက်ကို ဆံ့နေပြီး၊ ကြွက်ညွှန်ရွှေ့ပြီးနောက် - အပြည့်အဝသော အရေအတွက်ဖြစ်နေသည်။ round အလုပ်လုပ်ပုံမှာ ဤသို့ဖြစ်သည်။

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

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

ဥပမာ . border-image-repeat: စကားလုံးနှစ်လုံး

အကျယ်အတွက် repeat တန်ဖိုးနှင့် အမြင့်အတွက် stretch တန်ဖိုး။

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

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

ဥပမာ . ပုံရိပ်၏အကျယ်နှင့် နယ်နိမိတ်၏အကျယ် ကိုက်ညီခြင်း

ကြွက်ညွှန်ကိုရွှေ့သောအခါ border-width ကို တိုးမြှင့်ကြည့်ပါမည်၊ border-image ၏အထူကို တူညီစွာထားရှိပါမည်။ စိန်ပုံများသည် နယ်နိမိတ်တစ်ခုလုံးတလျှောက် ဆန့်ထွက်သွားလိမ့်မည်။

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

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

ဥပမာ . border-image-slice

တစ်ခြားပုံရိပ်တစ်ခုကို ယူကြည့်ပါမည်၊ ထိုပုံတွင် အမျိုးမတူသော အပိုင်းများသည် တူညီမှုမရှိပါ။

ပုံရိပ်၏မည်သည့်အပိုင်းများကို ဖြတ်ရမည်ကို ဖော်ပြပါမည် - 25% 30% 10% 20%။ ၎င်းသည် ဤသို့အလုပ်လုပ်သည်။ 25% - အပေါ်ဘက်ခြား၊ 30% - ညာဘက်ခြား ၊ 10% - အောက်ဘက်ခြား၊ 20% - ဘယ်ဘက်ခြား ။ အခြေခံအားဖြင့် ဤအပိုင်းများဖြင့် ထောင့်များကို ဖြတ်ထားသည်။ အပေါ်ဘယ်ဘက်ထောင့်သည် 25% ပုံရိပ်၏အပေါ်ပိုင်းမှ၊ နှင့် 20% ဘယ်ဘက်မှ ဖြစ်လာမည်။ အပေါ်ညာဘက်ထောင့် သည် 25% ပုံရိပ်၏အပေါ်ပိုင်းမှ၊ နှင့် 30% ညာဘက်မှ ဖြစ်လာမည်၊ ထိုနည်းအတိုင်းပင်။

ထို့အပြင်၊ ဘလောက်ပေါ်တွင် ကြွက်ညွှန်ကို ရွှေ့သောအခါ၊ fill သော့ချက်စကားလုံး လှုပ်ရှားလာပြီး၊ ပုံရိပ်၏အလယ်ဗဟိုအပိုင်းသည် ကျွန်ုပ်တို့၏ဘလောက်၏နောက်ခံအဖြစ် ပြောင်းလဲသွားလိမ့်မည်။

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

ဥပမာ

linear gradient ကိုအသုံးပြု၍ နယ်နိမိတ်တစ်ခုကို ပြုလုပ်ကြည့်ပါမည်။

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

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

ဥပမာ . border-image-width

border-image-width တန်ဖိုးကို 2 အဖြစ် သတ်မှတ်ပါမည် (နယ်နိမိတ်ပုံရိပ်သည် 2 ဆ ကိုယ်ပိုင်နယ်နိမိတ်ထက် ပိုမိုကြီးမားသွားလိမ့်မည်) အစိတ်အပိုင်းပေါ်တွင် ကြွက်ညွှန်ရွှေ့သောအခါ (26/2 - slash နောက်တွင်ဖော်ပြထားသည်၊ 26 သည် border-image-slice ၏တန်ဖိုးဖြစ်သည်)။ နယ်နိမိတ်ကိုယ်တိုင် မတိုးပွ