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

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

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

ရွေးချယ်သူ {
	border-image-repeat: stretch | repeat | round;
}

တန်ဖိုးများ

အကန့်အသတ်များ ပမာဏ	ဖော်ပြချက်
`stretch`	ဒြပ်စင်၏အရွယ်အစားများအထိ နယ်နိမိတ်ပုံဆွဲခြင်းကို ဆန့်ထုတ်သည်။ ဤတန်ဖိုးကို ပုံမှန်အတိုင်းအသုံးပြုသည်။
`repeat`	နယ်နိမိတ်ပုံဆွဲခြင်းကို ထပ်ခါထပ်ခါပြုလုပ်သည်။
`round`	ပုံဆွဲခြင်းကို ထပ်ခါထပ်ခါပြုလုပ်ပြီး ဒြပ်စင်၏ဘေးတစ်ဖက်တွင် ပုံများ၏တည်ငြိမ်သောနံပါတ်တစ်ခုရှိစေရန် အချိုးချသည်။

ပုံမှန်တန်ဖိုး: stretch.

အကန့်အသတ်များ ပမာဏ

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

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

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

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

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

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

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

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

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

ဥပမာ . စကားလုံးနှစ်လုံး

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

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

#elem {
	border-image-repeat: repeat stretch;
	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-source,
သည် နယ်နိမိတ်အတွက် ပုံလမ်းကြောင်းကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ border-image-slice,
သည် နယ်နိမိတ်အတွက် ပုံခွဲခြင်းဖြစ်သည်
ဂုဏ်သတ္တိ border-image-width,
သည် နယ်နိမိတ်အတွက် ပုံအရွယ်အစားကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ border-image-outset,
သည် နယ်နိမိတ်အတွက် ပုံရွေ့လျားမှုကို သတ်မှတ်ပေးသည်