border-image-width ပိုင်ဆိုင်မှု

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

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

Syntax

selector {
	border-image-width: CSS units | ရာခိုင်နှုန်းများ | ဂဏန်း | auto;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
CSS ယူနစ်များ	CSS ယူနစ်များဖြင့် သတ်မှတ်ထားသောတန်ဖိုး။
ရာခိုင်နှုန်းများ	နယ်နိမိတ်သတ်မှတ်ထားသော block ၏အရွယ်အစားနှင့် နှိုင်းယှဉ်၍ ရာခိုင်နှုန်းတန်ဖိုးများ။
ဂဏန်း	`border-width` ကို မြှောက်မည့် ဂဏန်းတန်ဖိုး။
`auto`	သော့ချက်စကားလုံး။ ထိုသို့သတ်မှတ်ပါက တန်ဖိုးသည် သက်ဆိုင်ရာ `border-image-slice` နှင့် ညီမျှသည်။ သင့်လျော်သောအရွယ်အစား မရှိပါက `border-width` တန်ဖိုးကို အသုံးပြုပြီး ထိုသို့ဖြစ်လျှင် ပုံရိပ်သည် အကြောင်းအရာ၏အောက်သို့ ဝင်ရောက်လျက် နယ်နိမိတ်ထောင့်တစ်ခုလုံးကို ဖြည့်စွက်ပေးသည်။ �ိုမိုနားလည်ရန် ဥပမာများကို ကြည့်ပါ။

ပုံသေတန်ဖိုး: 1.

ဥပမာ . ဂဏန်း

Element အပေါ် mouse ဖြင့် နှိပ်လိုက်သောအခါ border-image-width တန်ဖိုးကို 2 အဖြစ် သတ်မှတ်ကြည့်ပါမည်။ ထိုအခါ နယ်နိမိတ်၏အရွယ်အစားသည် 26px*2 - 2 ဆဖြစ်လာမည်။ ၎င်းသည် border-width တွင် သတ်မှတ်ထားသော ၎င်း၏အကျယ်ထက် နှစ်ဆကြီးသည်။ ထိုအခါ နယ်နိမိတ်သည် စာသားအောက်သို့ ဝင်ရောက်သွားမည် (နောက်ခံကဲ့သို့):

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

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

ဥပမာ . border-image-repeat ကို round သို့ ပြောင်းကြည့်ခြင်း

ယခင်ဥပမာတွင် mouse ဖြင့် နှိပ်လိုက်သောအခါ နယ်နိမိတ်အတွင်း စိန်ပွင့်ပုံစံ အရေအတွက် အပြည့်အဝ မရှိပေ။ ၎င်းကို border-image-repeat တန်ဖိုးကို round သတ်မှတ်၍ ပြင်ဆင်နိုင်ပါသည်:

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

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

ဥပမာ . ရာခိုင်နှုန်းများ

Element အပေါ် mouse ဖြင့် နှိပ်လိုက်သောအခါ border-image-width တန်ဖိုးကို 50% အဖြစ် သတ်မှတ်ကြည့်ပါမည်။ ထိုအခါ နယ်နိမိတ်၏အရွယ်အစားသည် block ၏အရွယ်အစား၏ 50% ဖြစ်လာမည် (ဆိုလိုသည်မှာ ညာဘက်နှင့် ဘယ်ဘက် နယ်နိမိတ်နှစ်ခုသည် block တစ်ခုလုံးကို ဖုံးအုပ်သွားမည်):

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

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

ဥပမာ . ရာခိုင်နှုန်းများ

Element အပေါ် mouse ဖြင့် နှိပ်လိုက်သောအခါ border-image-width တန်ဖိုးကို 30% အဖြစ် သတ်မှတ်ကြည့်ပါမည်။ ထိုအခါ နယ်နိမိတ်၏အရွယ်အစားသည် block ၏အရွယ်အစား၏ 30% ဖြစ်လာမည်:

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

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

ဥပမာ . ပစ်ဆယ်များ

Element အပေါ် mouse ဖြင့် နှိပ်လိုက်သောအခါ border-image-width တန်ဖိုးကို 50px အဖြစ် သတ်မှတ်ကြည့်ပါမည်:

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

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

ဥပမာ . auto တန်ဖိုး

Element အပေါ် mouse ဖြင့် နှိပ်လိုက်သောအခါ border-image-width တန်ဖိုးကို auto အဖြစ် သတ်မှတ်ကြည့်ပါမည်။

Mouse မနှိပ်မီ border-image-width တွင် တန်ဖိုး 1 (ပုံသေ) ရှိသည်။ ဤဥပမာတွင် အထူးသဖြင့် border-width ကို 52px ဖြင့် သတ်မှတ်ထားပြီး၊ border-image-slice ကို 26 တန်ဖိုးဖြင့် သတ်မှတ်ထားသည် (auto ၏အကျိုးသက်ရောက်မှုကို border-width သည် border-image-slice နှင့် မညီညွတ်ပါက သာမြင်ရမည်)။ border-image-width တွင် တန်ဖိုး 1 ရှိသောကြောင့်၊ နယ်နိမိတ်ပုံရိပ်သည် border-width ၏အကျယ်တစ်ခုလုံးကို နေရာယူမည်၊ ဆိုလိုသည်မှာ 52px အထိ ဆန့်ထုတ်သွားမည်။ Mouse နှိပ်သောအခါ border-image-width တန်ဖိုးသည် auto အဖြစ် သတ်မှတ်သွားပြီး ပုံရိပ်၏အကျယ်သည် border-image-slice တန်ဖိုး၊ ဆိုလိုသည်မှာ 26px နှင့် ညီမျှသွားမည်:

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

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

ဆက်လက်ဖတ်ရှုရန်

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