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

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

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

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

cssရွေးချယ်သူ {
  border-image-outset: အပေါင်းကိန်း;
}

နမူနာ . ကိန်း

အရာဝတ္ထုပေါ်သို့ မောက်စ်ဖြင့် နှိုက်သည့်အခါ border-image-outset ၏ တန်ဖိုးကို 3 အဖြစ် သတ်မှတ်ပါမည်။ ထိုသို့ဆိုလျှင် နယ်နိမိတ်သည် 26px*3 - border-width ဖြင့် သတ်မှတ်ထားသော ၎င်း၏အကျယ်၏ 3 ဆ အကွာအဝေးသို့ ရွေ့သွားမည်ဖြစ်သည်။

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

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

Результат:

နမူနာ . ပစ်ကယ်များ

အရာဝတ္ထုပေါ်သို့ မောက်စ်ဖြင့် နှိုက်သည့်အခါ border-image-outset ၏ တန်ဖိုးကို 30px အဖြစ် သတ်မှတ်ပါမည်။ ထိုသို့ဆိုလျှင် နယ်နိမိတ်သည် 30px အကွာအဝေးသို့ ရွေ့သွားမည်ဖြစ်သည်။

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

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

Результат:

ဤအရာကိုလည်း ကြည့်ပါ