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

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

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

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

တန်ဖိုးများ

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

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

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

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

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

css#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

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

css#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 သည် အလုပ်လုပ်သည်:

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

css#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:

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

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

Результат:

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