CSS Border ပုံများ
CSS Border ပုံများ
CSS border-image
ပိုင်ဆိုင်မှုဖြင့်၊ သင်သည် ဒြပ်စင်တစ်ဝိုက်ရှိ ဘောင်အဖြစ် အသုံးပြုရန် ပုံတစ်ခုကို သတ်မှတ်နိုင်သည်။
CSS ဘောင်-ပုံ ပိုင်ဆိုင်မှု
CSS border-image
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ဝိုက်ရှိ ပုံမှန်ဘောင်အစား အသုံးပြုရန် ပုံတစ်ပုံကို သတ်မှတ်ခွင့်ပြုသည်။
အိမ်ခြံမြေတွင် အပိုင်းသုံးပိုင်းရှိသည်။
- ဘောင်အဖြစ် အသုံးပြုရန် ပုံ
- ပုံဘယ်မှာ ဖြတ်ရမလဲ
- အလယ်အပိုင်းများကို ထပ်ခါတလဲလဲ သို့မဟုတ် ဆန့်သင့်သလားဟု သတ်မှတ်ပါ။
အောက်ပါပုံ ("border.png" ဟုခေါ်သည်):
ပစ္စည်း border-image
သည် ပုံကိုယူ၍ tic-tac-toe board ကဲ့သို့ အပိုင်းကိုးပိုင်းခွဲထားသည်။ ထို့နောက် ၎င်းသည် ထောင့်များကို ထောင့်များကို နေရာချကာ အလယ်အပိုင်းများကို သင်သတ်မှတ်ထားသည့်အတိုင်း ထပ်ခါထပ်ခါ သို့မဟုတ် ဆန့်သည်။
မှတ်ချက်-border-image
အလုပ်လုပ်ရန်အတွက်၊ ဒြပ်စင်သည် ပိုင်ဆိုင်မှုသတ်မှတ်မှုလည်း
လိုအပ်ပါသည် border
။
ဤတွင်၊ ဘောင်ကိုဖန်တီးရန် ပုံ၏အလယ်အပိုင်းများကို ထပ်ခါတလဲလဲလုပ်သည်-
အနားသတ်ပုံတစ်ခု။
ဤတွင် ကုဒ်ဖြစ်ပါသည်
ဥပမာ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
ဤတွင်၊ ဘောင်ကိုဖန်တီးရန် ပုံ၏အလယ်အပိုင်းများကို ဆန့်ထားသည်။
အနားသတ်ပုံတစ်ခု။
ဤတွင် ကုဒ်ဖြစ်ပါသည်
ဥပမာ
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
အကြံပြုချက်- ပိုင်ဆိုင်မှု border-image
သည် အမှန်တကယ်အားဖြင့်
border-image-source
, border-image-slice
, border-image-width
,
border-image-outset
နှင့် border-image-repeat
ဂုဏ်သတ္တိများအတွက် လက်တိုပစ္စည်းဖြစ်သည်။
CSS ဘောင်-ပုံ - ကွဲပြားသော အချပ်တန်ဖိုးများ
မတူညီသောအချပ်တန်ဖိုးများသည် ဘောင်၏အသွင်အပြင်ကို လုံးဝပြောင်းလဲစေသည်-
ဥပမာ 1-
နယ်စပ်ပုံ- url(border.png) 50 အဝိုင်း;
ဥပမာ 2-
border-image- url(border.png) 20% round;
ဥပမာ 3-
နယ်စပ်ပုံ- url(border.png) 30% ပတ်ပတ်လည်၊
ဤတွင် ကုဒ်ဖြစ်ပါသည်
ဥပမာ
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30% round;
}
CSS Border Image Properties
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |