border-image-slice ဂုဏ်သတ္တိ
border-image-slice ဂုဏ်သတ္တိသည်
ဘရောက်ဆာကို ပုံ၏အဘယ်အပိုင်းများသည်
ထောင့်များအတွက်သွားမည်၊ အဘယ်အပိုင်းများသည် ဘေးဘက်များအတွက်သွားမည် (နှင့် မည်သည့်အပိုင်းသည်
ဗဟိုဖြစ်မည်) ကို ညွှန်ပြသည်။ ထောင့်များအတွက် 4
အပိုင်းများသွားသည်၊ ဘေးဘက်များအတွက် 4
အပိုင်းများသွားပြီး တစ်ပိုင်း (ဗဟို) သည် အစိတ်အပိုင်း၏
နောက်ခံအတွက်သွားသည်
(ရွေးချယ်ခွင့်ရှိသည်၊ သော့ချက်စကားလုံး fill)။
အသေးစိတ်အချက်အလက်များအတွက်
border-image ဂုဏ်သတ္တိကို ကြည့်ပါ။
ဝါကျဖွဲ့ပုံ
<+css+> ရွေးချယ်သူ { border-image-slice:1-မှ 4-အထိ ဂဏန်းများ | 1-မှ 4-အထိ ရာခိုင်နှုန်းများ;
}
<-css->
ဂဏန်းများနှင့် ရာခိုင်နှုန်းများနှင့်အတူ ခြားနားချက်ဖြင့်
သော့ချက်စကားလုံး fill ရှိနိုင်သည်။
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| ရာခိုင်နှုန်းများ | ရာခိုင်နှုန်းများကို ပုံ၏အရွယ်အစားနှင့် နှိုင်းယှဉ်၍ တွက်ချက်သည်။ အလျားလိုက်များသည် အကျယ်နှင့် နှိုင်းယှဉ်၍၊ ဒေါင်လိုက်များ — အမြင့်နှင့် နှိုင်းယှဉ်၍။ |
| ဂဏန်းများ | ဂဏန်းများသည် ပစ်ဆယ်များ (ရက်စ်တာပုံအတွက်) သို့မဟုတ် ကိုဩဒိနိတ်များ (ဗက်တာပုံအတွက်) ဖြစ်သည်။ ယူနစ်များကို မဖော်ပြပါ။ |
fill |
စံအပြုအမူသည် ဗဟိုအပိုင်း၏
ပုံကို စွန့်ပစ်မည်ဟု ယူဆသည်။ ၎င်းကို အသုံးပြုရန်
ဂဏန်းများ သို့မဟုတ် ရာခိုင်နှုန်းများနှင့်အတူ သော့ချက်စကားလုံး fill ကို အပို
အသုံးပြုရန် လိုအပ်သည်။
|
ပါရာမီတာအရေအတွက်
အကွာအဝေးသည် 1, 2,
3 သို့မဟုတ် 4 ပါရာမီတာကို လက်ခံနိုင်သည်။
အကွာအဝေးအတွက် ယူနစ်များကို
မရေးကြောင်း သတိပြုပါ (ဥပမာ၊ ရိုးရိုး 20,
20px မဟုတ်)။ ထူအရှည်ကို % ဖြင့်လည်း သတ်မှတ်နိုင်သည်။
| ပါရာမီတာအရေအတွက် | ဖော်ပြချက် |
|---|---|
1 |
ဘက်အားလုံးအတွက် တစ်ပြိုင်နက် ထူ။ |
2 |
1 2; - အပေါ် နှင့် အောက်အတွက် 1px၊ ဘယ် နှင့် ညာအတွက် 2px။ |
3 |
1 2 3; - အပေါ်အတွက် 1px၊ ဘယ် နှင့် ညာအတွက် 2px၊ အောက်အတွက် 3px။ |
4 |
1 2 3 4; - အပေါ်အတွက် 1px၊ ညာအတွက် 2px၊ အောက်အတွက် 3px၊ ဘယ်အတွက် 4px။ |
စံတန်ဖိုး: 100%(?)။
ဥပမာ
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;
}
Результат:
ဥပမာ
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;
}
Результат:
ဤသည်ကိုလည်း ကြည့်ပါ
-
border-imageဂုဏ်သတ္တိ,
အရာသည် နယ်နိမိတ်ပုံအတွက် အတိုကောက်ဖြစ်သည် -
border-image-sourceဂုဏ်သတ္တိ,
အရာသည် နယ်နိမိတ်အတွက် ပုံလမ်းကြောင်းကို သတ်မှတ်ပေးသည် -
border-image-repeatဂုဏ်သတ္တိ,
အရာသည် နယ်နိမိတ်အတွက် ပုံကို ထပ်ခါထပ်ခါလုပ်ခြင်းဖြစ်သည် -
border-image-widthဂုဏ်သတ္တိ,
အရာသည် နယ်နိမိတ်အတွက် ပုံ၏အရွယ်အစားကို သတ်မှတ်ပေးသည် -
border-image-outsetဂုဏ်သတ္တိ,
အရာသည် နယ်နိမိတ်အတွက် ပုံ၏ရွေ့လျားမှုကို သတ်မှတ်ပေးသည်