CSS 圆角

CSS 圆角

ပုံစံအော်ချိုင်ခ် ဖြင့် border-radius ပျက်ဆိပ် သုံးနိုင် ပြီး အရာဝတ္တု ကို အသေးအနိုင် ဖော်ပြခြင်း ဖြစ်သည်。

CSS border-radius အရိုက်

CSS border-radius 属性定义元素角的半径。

အကြိုးသတ်您可以使用此属性为元素添加圆角！

这里有三个例子：

1. အခြောက်အရောင်ပိုင်းပါ အကျိုးသမား：

နှီးချိုးဆုံး！

2. နယ်အိုးရှိသော အခြောက်အရောင်ပိုင်းပါ အကျိုးသမား：

နှီးချိုးဆုံး！

3. အခြောက်အရောင်ပိုင်းရှိသော အခြောက်အရောင်ပိုင်းပါ အကျိုးသမား：

နှီးချိုးဆုံး！

အကျိုးသမားမှာ အချက်အလက်မှာ:

အကျိုးသမား

#rcorners1 {
  border-radius: 25 px;
  background: #73AD21;
  padding: 20 px; 
  width: 200 px;
  height: 150 px; 
}
#rcorners2 {
  border-radius: 25 px;
  border: 2 px solid #73AD21;
  padding: 20 px; 
  width: 200 px;
  height: 150 px; 
}
#rcorners3 {
  border-radius: 25 px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20 px; 
  width: 200 px;
  height: 150 px; 
}

ကိုယ်တိုင် ကျင်းပမည်

အကြိုးသတ်border-radius အချက်အလက် အသုံးပြုသည့် အချက်အလက် အသုံးပြုသည့် အချက်အလက် ဖြစ်ပါသည်：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - မျက်နှာပြင် တစ်ခုခုကို အချက်အလက်ပြုသည်

border-radius အချက်အလက် အသုံးပြုနိုင်သည့် အရာ ၁ ထိ ၄ ထိ အရာသတ်မှတ်ပါသည်။ အကျုံးချက်များမှာ:

လေး အချက်အလက် - border-radius: 15 px 50 px 30 px 5 px;（တစ်ပုံတည်းဖြင့် အရှေ့အထိပ်၊ အရှေ့အထိပ်၊ အနောက်အောက်၊ အရှေ့အောက် အား အသုံးပြုသည်）：

သုံး အချက်အလက် - border-radius: 15 px 50 px 30 px;（ပထမ အချက်အလက် အသုံးပြုသည့် နေရာ အား အရှေ့အထိပ် အား အသုံးပြုပြီး ဒုတိယ အချက်အလက် အသုံးပြုသည့် နေရာ အား အရှေ့အထိပ် နှင့် အနောက်အောက် အောက်ပိုင်း အား အသုံးပြုပြီး တတိယ အချက်အလက် အသုံးပြုသည့် နေရာ အား အနောက်အောက် အောက်ပိုင်း အား အသုံးပြုသည်）：

နှစ် အချက်အလက် - border-radius: 15 px 50 px;（ပထမ အချက်အလက် အသုံးပြုသည့် နေရာ အား အရှေ့အထိပ် နှင့် အနောက်အောက် အပေါ်ပိုင်း အား အသုံးပြုပြီး ဒုတိယ အချက်အလက် အသုံးပြုသည့် နေရာ အား အရှေ့အထိပ် နှင့် အနောက်အောက် အောက်ပိုင်း အား အသုံးပြုသည်）：

တစ် အချက်အလက် - border-radius: 15 px;（အဆိုပါ အချက်အလက် အသုံးပြုသည့် နေရာ အား ပြုပြင်ပြီး နှီးချိုးဆုံး အပေါ်ပိုင်း အား တူညီအောင် ပြုပြင်သည်）：

အကျိုးသမားမှာ အချက်အလက်မှာ:

အကျိုးသမား

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

ကိုယ်တိုင် ကျင်းပမည်

ကျွန်တော် လည်း အီလီယမ်း နှီးချိုးဆုံး ပုံပြင်း ကို ဖန်တီးနိုင်ပါသည်:

အကျိုးသမား

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

ကိုယ်တိုင် ကျင်းပမည်

CSS နှီးချိုးဆုံးအချက်အလက်

အချက်အလက် ဖော်ပြ
border-radius သုံးသပ်ပေးရာ အနည်းငယ် border-*-*-radius အချက်အလက်များ၏ ပါဝင်သည့် အစိတ်အပိုင်း အသုံးပြုရသည်。
border-top-left-radius 定义左上角边框的形状。
border-top-right-radius 定义右上角边框的形状。
border-bottom-right-radius 定义右下角边框的形状。
border-bottom-left-radius 定义左下角边框的形状。