CSS border-radius ပိုင်ဆိုင်မှု
ဥပမာ
အဝိုင်းထောင့်များကို <div> ဒြပ်စင်နှစ်ခုသို့ ထည့်ပါ-
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
border-radius
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်၏ထောင့်များ၏ အချင်းဝက်ကို သတ်မှတ်သည် ။
အကြံပြုချက်- ဤပိုင်ဆိုင်မှုသည် သင့်အား ဒြပ်စင်များသို့ လုံးဝန်းသောထောင့်များထည့်နိုင်စေပါသည်။
ဤပိုင်ဆိုင်မှုသည် တန်ဖိုးတစ်ခုမှ လေးခုအထိ ရှိနိုင်သည်။ ဤတွင် စည်းမျဉ်းများ-
တန်ဖိုးလေးမျိုး - border-radius: 15px 50px 30px 5px; (ပထမတန်ဖိုးသည် ဘယ်ဘက်အပေါ်ထောင့်တွင် သက်ရောက်သည်၊ ဒုတိယတန်ဖိုးသည် ထိပ်-ညာထောင့်တွင် သက်ရောက်သည်၊ တတိယတန်ဖိုးသည် အောက်ခြေ-ညာဘက်ထောင့်တွင် သက်ရောက်သည်၊ စတုတ္ထတန်ဖိုးသည် အောက်ခြေ-ဘယ်ဘက်ထောင့်တွင် သက်ရောက်သည်)။
တန်ဖိုးသုံးခု - border-radius: 15px 50px 30px; (ပထမတန်ဖိုးသည် ဘယ်ဘက်အပေါ်ထောင့်တွင် အကျုံးဝင်သည်၊ ဒုတိယတန်ဖိုးသည် အပေါ်-ညာဘက်နှင့် ဘယ်ဘက်အောက်ခြေထောင့်များတွင် သက်ရောက်သည်၊ တတိယတန်ဖိုးသည် အောက်ခြေ-ညာဘက်ထောင့်တွင် သက်ရောက်သည်)။
တန်ဖိုးနှစ်ခု - border-radius: 15px 50px; (ပထမတန်ဖိုးသည် အပေါ်-ဘယ်နှင့် အောက်ခြေ-ညာထောင့်များနှင့် သက်ဆိုင်ပြီး ဒုတိယတန်ဖိုးသည် အပေါ်-ညာနှင့် အောက်-ဘယ်ဘက်ထောင့်များတွင် အကျုံးဝင်သည်)
တန်ဖိုးတစ်ခု - border-radius: 15px; (တန်ဖိုးသည် အညီအမျှဝိုင်းထားသော လေးထောင့်အားလုံးနှင့် သက်ဆိုင်သည်-
မူလတန်ဖိုး: | ၀ယ်တယ်။ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်တယ် ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.borderRadius="25px" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit- သို့မဟုတ် -moz- ဖြင့်လိုက်သောနံပါတ်များကို ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပါ။
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS Syntax
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
မှတ်ချက်- အချင်းဝက်တစ်ခုစီအတွက် တန်ဖိုးလေးခုကို အပေါ်-ဘယ်၊ အပေါ်-ညာ၊ အောက်-ညာ၊ အောက်-ဘယ်-အစီအစဥ်တွင် ပေးထားသည်။ ဘယ်ဘက်အောက်ခြေကို ချန်လှပ်ထားရင် ညာဘက်အပေါ်ထိပ်နဲ့ အတူတူပါပဲ။ အောက်ခြေ-ညာဘက်ကို ချန်လှပ်ထားလျှင် ၎င်းသည် ဘယ်ဘက်အပေါ်နှင့် တူညီသည်။ ညာဘက်အပေါ်မှ ချန်လှပ်ထားလျှင် ၎င်းသည် ဘယ်ဘက်အပေါ်နှင့် အတူတူပင်ဖြစ်သည်။
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
နောက်ခံအရောင်ရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များကို သတ်မှတ်ပါ-
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
ဥပမာ
ဘောင်တစ်ခုပါရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များကို သတ်မှတ်ပါ-
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
ဥပမာ
နောက်ခံပုံပါရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များကို သတ်မှတ်ပါ-
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
ဥပမာ
ဒါကိုလည်း သတိပြုပါ။
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Rounded Corners
HTML DOM ရည်ညွှန်းချက်- borderRadius ပိုင်ဆိုင်မှု