border-radius ဂုဏ်သတ္တိ

border-radius ဂုဏ်သတ္တိသည် အနားစွန်းများနှင့် နောက်ခံအတွက် ဝိုင်းစေသော ထောင့်များကို ဖန်တီးပေးသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးသည် မည်သည့် အရွယ်အစား ယူနစ်များကိုမဆို ဖြစ်နိုင်သည်။ ပုံသေထားသော တန်ဖိုးမှာ- 0 ဖြစ်သည်။ ၎င်းသည် အောက်ပါဂုဏ်သတ္တိများအတွက် အတိုကောက်ပုံစံဖြစ်သည်- border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

ဝါကျဖွဲ့ပုံ

cssselector {
  border-radius: value;
}

တန်ဖိုးအရေအတွက်

ဂုဏ်သတ္တိသည် 1, 2, 3 သို့မဟုတ် 4 အရေအတွက်ရှိ တန်ဖိုးများကို လက်ခံနိုင်ပြီး ၎င်းတို့ကို ကြားခံနေရာဖြင့် ခွဲခြားပေးရမည်-

ဘဲဥပုံ ဝိုင်းစေခြင်း

ဘယ်ဘက်ခြမ်း (/) ဖြင့် ခွဲထားသော တန်ဖိုးနှစ်ခုသည် ဘဲဥပုံ ဝိုင်းမှုကို သတ်မှတ်ပေးသည်။ ဘယ်ဘက်ခြမ်းမတိုင်မီရှိ တန်ဖိုးသည် အလျားလိုက် ဝိုင်းမှုကို ညွှန်ပြသည်၊ ဘယ်ဘက်ခြမ်းပြီးနောက်ရှိ တန်ဖိုးသည် ဒေါင်လိုက် ဝိုင်းမှုကို ညွှန်ပြသည်-

cssselector {
  border-radius: horizontal / vertical;
}

ထောင့်များစွာအတွက် ဝိုင်းမှုများ သတ်မှတ်ထားပါက၊ ဘယ်ဘက်ခြမ်းမတိုင်မီတွင် အလျားလိုက် ဝိုင်းမှုအားလုံးကို စာရင်းပြုစုပြီး၊ ဘယ်ဘက်ခြမ်းပြီးနောက်တွင် ဒေါင်လိုက် ဝိုင်းမှုအားလုံးကို စာရင်းပြုစုသည်။

ဥပမာ

ထောင့်အားလုံးအတွက် 10px ဝိုင်းမှုကို သတ်မှတ်ကြပါစို့-

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

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

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

ထောင့်တစ်ခုစီအတွက် ဝိုင်းမှုကို 10px ဖြင့် သတ်မှတ်ပါ၊ ထို့နောက် ဒုတိယထောင့်များအတွက် ဝိုင်းမှုကို 40px ဖြင့် သတ်မှတ်ပါ-

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

အပေါ်ဝဲထောင့်အတွက် 10px ဝိုင်းမှုကို သတ်မှတ်ပါ၊ အောက်ညာထောင့်အတွက် 30px ဝိုင်းမှုကို သတ်မှတ်ပါ၊ ထို့နောက် ဒုတိယထောင့်များအတွက် 50px ဝိုင်းမှုကို သတ်မှတ်ပါ-

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

ထောင့်တစ်ခုစီအတွက် ကွဲပြားသော ဝိုင်းမှုများကို သတ်မှတ်ကြပါစို့-

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

ဘဲဥပုံ ဝိုင်းမှုကို ပြုလုပ်ကြည့်ကြပါစို့၊ အလျားလိုက် ဝိုင်းမှုအတွက် 20px ကို သတ်မှတ်ပြီး၊ ဒေါင်လိုက် ဝိုင်းမှုအတွက် 40px ကို သတ်မှတ်ကြည့်ကြပါစို့-

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

ယခု ထောင့်တစ်ခုစီအတွက် ကွဲပြားသော ဘဲဥပုံ ဝိုင်းမှုကို သတ်မှတ်ကြည့်ကြပါစို့-

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

စတုရန်းပုံ ဘလောက်တစ်ခုအတွက် စတုရန်း၏ အခြမ်းတစ်ဝက်နှင့် ညီမျှသော ဝိုင်းမှုကို သတ်မှတ်ပါက၊ စက်ဝိုင်းတစ်ခု ရရှိမည်ဖြစ်သည်-

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ

စတုရန်း၏အခြမ်းထက် ပိုကြီးသော ဝိုင်းမှုကို သတ်မှတ်ပါက၊ စက်ဝိုင်းတစ်ခုပင် ရရှိဦးမည်ဖြစ်သည်-

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ

border-radius ကို 50% အဖြစ် သတ်မှတ်ခြင်းဖြင့် စက်ဝိုင်းတစ်ခုကိုလည်း ရရှိနိုင်သည် (အားသာချက်မှာ စတုရန်း၏အရွယ်အစားပြောင်းလဲသောအခါ ဝိုင်းမှုကို ပြောင်းလဲရန် မလိုအပ်ပါ)။

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ

ဆယ်ဖို့တစ်ဖို့ (%) တန်ဖိုးဖြင့် border-radius ကို စတုဂံအတွက် သတ်မှတ်ပါက၊ ဘဲဥပုံ ဝိုင်းမှုတစ်ခု ရရှိမည်ဖြစ်သည်။ အကျယ်ကို 400px ဖြင့် သတ်မှတ်ထားပြီး၊ အမြင့်ကို 200px ဖြင့် သတ်မှတ်ထားကာ border-radius ကို 10% ဖြင့် သတ်မှတ်ထားပါက၊ ၎င်းသည် 40px/20px ဟု ရေးထားသည်နှင့် အတူတူပင်ဖြစ်သည်-

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

ဥပမာ

border-radius တန်ဖိုးကို စတုဂံအတွက် 50% အဖြစ် သတ်မှတ်ပါက - ဘဲဥပုံတစ်ခု ရရှိမည်ဖြစ်သည်-

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

ဥပမာ

border-radius ဂုဏ်သတ္တိသည် အနားစွန်း၏ ထောင့်များကိုသာမက နောက်ခံ၏ထောင့်များကိုပါ ဝိုင်းစေသည်-

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

ဆက်လက်လေ့လာရန်