CSS Rounded Corners

❮ ယခင် နောက်တစ်ခု ❯

CSS Rounded Corners

CSS border-radiusပိုင်ဆိုင်မှုဖြင့်၊ သင်သည် မည်သည့်ဒြပ်စင် " rounded corners" ကို ပေးနိုင်ပါသည်။

CSS border-radius ပိုင်ဆိုင်မှု

CSS border-radiusပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခု၏ထောင့်များ၏ အချင်းဝက်ကို သတ်မှတ်သည်။

အကြံပြုချက်- ဤပိုင်ဆိုင်မှုသည် သင့်အား ဒြပ်စင်များသို့ လုံးဝန်းသောထောင့်များထည့်နိုင်စေပါသည်။

ဤသည်မှာ ဥပမာသုံးခုဖြစ်သည်။

1. သတ်မှတ်ထားသော နောက်ခံအရောင်ရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များ-

လုံးဝန်းသောထောင့်များ။

2. ဘောင်တစ်ခုပါရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များ-

လုံးဝန်းသောထောင့်များ။

3. နောက်ခံပုံပါရှိသော ဒြပ်စင်အတွက် အဝိုင်းထောင့်များ-

လုံးဝန်းသောထောင့်များ။

ဤတွင် ကုဒ်ဖြစ်ပါသည်

ဥပမာ

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

အကြံပြုချက်- ပိုင်ဆိုင်မှု သည် အမှန်တကယ် တွင် , , နှင့် ဂုဏ်သတ္တိများ border-radiusအတွက် အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည် ။border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius

CSS border-radius - ထောင့်တစ်ခုစီကို သတ်မှတ်ပါ။

ပစ္စည်း သည် border-radiusတန်ဖိုးတစ်ခုမှ လေးခုအထိ ရှိနိုင်သည်။ ဤတွင် စည်းမျဉ်းများ-

တန်ဖိုးလေးမျိုး - border-radius: 15px 50px 30px 5px; (ပထမတန်ဖိုးသည် ဘယ်ဘက်အပေါ်ထောင့်တွင် သက်ရောက်သည်၊ ဒုတိယတန်ဖိုးသည် ထိပ်-ညာထောင့်တွင် သက်ရောက်သည်၊ တတိယတန်ဖိုးသည် အောက်ခြေ-ညာဘက်ထောင့်တွင် သက်ရောက်သည်၊ စတုတ္ထတန်ဖိုးသည် အောက်ခြေ-ဘယ်ဘက်ထောင့်တွင် သက်ရောက်သည်)။

တန်ဖိုးသုံးခု - border-radius: 15px 50px 30px; (ပထမတန်ဖိုးသည် ဘယ်ဘက်အပေါ်ထောင့်တွင် အကျုံးဝင်သည်၊ ဒုတိယတန်ဖိုးသည် အပေါ်-ညာဘက်နှင့် ဘယ်ဘက်အောက်ခြေထောင့်များတွင် သက်ရောက်သည်၊ တတိယတန်ဖိုးသည် အောက်ခြေ-ညာဘက်ထောင့်တွင် သက်ရောက်သည်)။

တန်ဖိုးနှစ်ခု - border-radius: 15px 50px; (ပထမတန်ဖိုးသည် အပေါ်-ဘယ်နှင့် အောက်ခြေ-ညာထောင့်များနှင့် သက်ဆိုင်ပြီး ဒုတိယတန်ဖိုးသည် အပေါ်-ညာနှင့် အောက်-ဘယ်ဘက်ထောင့်များတွင် အကျုံးဝင်သည်)

တန်ဖိုးတစ်ခု - border-radius: 15px; (တန်ဖိုးသည် အညီအမျှဝိုင်းထားသော လေးထောင့်အားလုံးနှင့် သက်ဆိုင်သည်-

ဤတွင် ကုဒ်ဖြစ်ပါသည်

ဥပမာ

#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
height: 150px;
}

#rcorners4 {
  border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

သင်သည် elliptical ထောင့်များကိုလည်း ဖန်တီးနိုင်သည်။

ဥပမာ

#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}