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

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

ဝါကျဖွဲ့ပုံ

cssရွေးချယ်သူ {
  border-image-source: url(ပုံလမ်းကြောင်း);
}

နမူနာ

border-image-source ဂုဏ်သတ္တိကို border-image-slice နှင့် တွဲဖက်၍ သတ်မှတ်သင့်သည်။

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

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

Результат:

နမူနာ

border-image-slice ဂုဏ်သတ္တိ မသတ်မှတ်ထားပါက ပုံတစ်ခုလုံးသည် ထောင့်များပေါ်သို့ ရောက်ရှိသွားမည် (အဘယ့်ကြောင့်ဆိုသော် border-image-slice တန်ဖိုးအမှန် (default) မှာ 100% ဖြစ်သောကြောင့်)။

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

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

Результат:

နမူနာ

ပုံအစား linear gradient ကို သတ်မှတ်နိုင်သည်။

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

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

Результат:

နမူနာ

border-image-slice ဂုဏ်သတ္တိ မသတ်မှတ်ထားပါက gradient သည် ထောင့်များပေါ်သို့ ရောက်ရှိသွားမည် (အဘယ့်ကြောင့်ဆိုသော် border-image-slice တန်ဖိုးအမှန် (default) မှာ 100% ဖြစ်သောကြောင့်)။

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

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

Результат:

နမူနာ

border-radius ဂုဏ်သတ္တိကို သတ်မှတ်ထားပါက နယ်နမိတ်၏ ထောင့်ဝိုင်းခြင်းများ မဖြစ်ပေါ်တော့ပါ (gradient အသုံးပြုသည့်အခါမှာလည်း ထိုနည်းတူစွာပင်)၊ သို့သော် အကျိုးသက်ရောက်မှုသည် စိတ်ဝင်စားဖွယ်ကောင်းနေဆဲဖြစ်သည်။

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

css#elem {
  border-radius: 100px;
  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;
}

Результат:

ဒါကိုလည်း ကြည့်ပါ