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

border-width ဂုဏ်သတ္တိသည် နယ်နိမိတ်မျဥ်းထူအရှည်ကို အားလုံးတစ်ချိန်တည်းတွင် သို့မဟုတ် တစ်ဖက်စီအတွက် သီးခြားစီ သတ်မှတ်ပေးသည်။ ၎င်းသည် border-left-width, border-bottom-width, border-top-width, border-bottom-width. ဂုဏ်သတ္တိများအတွက် အတိုကောက်ဂုဏ်သတ္တိဖြစ်သည်။

ဂုဏ်သတ္တိ၏တန်ဖိုးများအဖြစ် ရာခိုင်နှုန်းများမှလွဲ၍ မည်သည့် အရွယ်အစားယူနစ်များ မဆို ပါဝင်နိုင်သည်၊ သို့မဟုတ် သော့ချက်စကားလုံးများဖြစ်သော thin (2 ပစ်ဆယ်များတွင် နယ်နိမိတ်မျဥ်း), medium (4 ပစ်ဆယ်များတွင် နယ်နိမိတ်မျဥ်း) သို့မဟုတ် thick (6 ပစ်ဆယ်များတွင် နယ်နိမိတ်မျဥ်း)။ စံထားရာတန်ဖိုး: medium.

ဝါကျဖွဲ့ပုံ

cssselector {
  border-width: 1, 2, 3 သို့မဟုတ် 4 တန်ဖိုးများ;
}

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

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

ဥပမာ

တစ်ပစ်ဆယ်ထူသော နယ်နိမိတ်မျဥ်းကို သတ်မှတ်ပါမည်:

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

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

Результат:

ဥပမာ

4 ပစ်ဆယ်ထူသော နယ်နိမိတ်မျဥ်းကို သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

အပေါ်နှင့် အောက်နယ်နိမိတ်မျဥ်းထူအရှည်ကို 1px နှင့် ညာနှင့် ဘယ်ဘက်များကို 4px ဟူ၍ သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: 1px 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

အပေါ်နယ်နိမိတ်မျဥ်းထူအရှည်ကို 1px, ညာနှင့် ဘယ်ဘက်များကို 4px၊ အောက်ဘက်ကို 6px ဟူ၍ သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: 1px 4px 6px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

အပေါ်နယ်နိမိတ်မျဥ်းထူအရှည်ကို 1px, ညာဘက်ကို 4px၊ အောက်ဘက်ကို 6px, ဘယ်ဘက်ကို 8px ဟူ၍ သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: 1px 4px 6px 8px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

သော့ချက်စကားလုံး thin ဖြင့် နယ်နိမိတ်မျဥ်းထူအရှည်ကို သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: thin;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

သော့ချက်စကားလုံး medium ဖြင့် နယ်နိမိတ်မျဥ်းထူအရှည်ကို သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: medium;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

သော့ချက်စကားလုံး thick ဖြင့် နယ်နိမိတ်မျဥ်းထူအရှည်ကို သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: thick;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

ဥပမာ

မတူညီသောဘက်များအတွက် မတူညီသော နယ်နိမိတ်မျဥ်းများကို သတ်မှတ်ပါမည်:

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

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

ဒီလည်းကြည့်ပါ