CSS အဝိုင်း

CSS ဘေးအဝပ် အချက်အလက်

CSS border အချက်အလက် သည် အဆိုပါ အီအစ်စ် ဘေးအဝပ် အပုံစံ၊ အကွယ်ချက် နှင့် အရောင်ကို သတ်မှတ်ပေးနိုင်သည်。

ကျွန်တော် ဘေးအဝပ် အားလုံး ရှိသည်。

ကျွန်တော် အရောင်ရှိ အောက်ဘက် ဘေးအဝပ် တစ်ခု ရှိသည်。

ကျွန်တော် နှလုံးအပုံ ဘေးအဝပ် ရှိသည်。

ကျွန်တော် အရောင်ရှိ အရှေ့ဘက် ဘေးအဝပ် တစ်ခု ရှိသည်。

CSS ဘေးအဝပ် အပုံစံ

border-style အချက်အလက် သည် ပြုလုပ်သော ဘေးအဝပ် အပုံစံကို သတ်မှတ်သည်。

ခွင့်ပြုထားသော အချက်အလက်များ

  • dotted - အကွယ်ချက် အမြောက်အမြဲ
  • dashed - အကွယ်ချက် အပြင်းအဖျက်
  • solid - အကွယ်ချက် အပြင်းအဖျက်
  • double - ကိုယ်ဝိုင်း အကွယ်ချက်
  • groove - 3D groove အကွယ်ချက် အကွဲသတ်မှတ်
  • ridge - 3D ridge အကွယ်ချက် အကွဲသတ်မှတ်
  • inset - 3D inset အကွယ်ချက် အကွဲသတ်မှတ်
  • outset - 3D outset အကွယ်ချက် အကွဲသတ်မှတ်
  • none - အကွယ်ချက် အကွဲသတ်မှတ်
  • hidden - အကွယ်ချက် အကွဲသတ်မှတ်

border-style အချက်အလက် ၁ မှ ၄ တိုင်း ကို သတ်မှတ်နိုင်သည် (အထက်ဘက် ဘေးအဝပ်၊ အတောဝန်ဘက် ဘေးအဝပ်၊ အနောက်ဘက် ဘေးအဝပ်၊ အရှေ့ဘက် ဘေးအဝပ် အတွက်)。

အမျိုးအစား

ပြသော အကွယ်ချက် အပုံစံများကို

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

结果：

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。其效果取决于 border-color 的值。

垄状边框。其效果取决于 border-color 的值。

3D inset 边框。其效果取决于 border-color 的值。

3D outset 边框。其效果取决于 border-color 的值。

无边框。

隐藏边框。

混合边框。

亲自试一试

注意：除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！