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

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

ဝါကျဖွဲ့ပုံ

cssselector {
  border-style: value;
}

တန်ဖိုးများ

စံထားရာတန်ဖိုး- none.

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

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

ဥပမာ . solid တန်ဖိုး

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

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

Результат:

ဥပမာ . dotted တန်ဖိုး

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

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

Результат:

ဥပမာ . dashed တန်ဖိုး

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

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

Результат:

ဥပမာ . ridge တန်ဖိုး

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

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

Результат:

ဥပမာ . double တန်ဖိုး

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

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

Результат:

ဥပမာ . groove တန်ဖိုး

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

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

Результат:

ဥပမာ . inset တန်ဖိုး

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

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

Результат:

ဥပမာ . outset တန်ဖိုး

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

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

Результат:

ဥပမာ

ဤဥပမာတွင် element ၏ မတူညီသောဘက်များအတွက် မတူညီသော နယ်နမိတ်မျဉ်းအမျိုးအစားများ သတ်မှတ်ထားသည်-

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

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

Результат:

ဥပမာ

ယခုတွင် element ၏ မတူညီသောဘက်များအတွက် နယ်နမိတ်မျဉ်း၏ အထူနှင့် အရောင်ကိုလည်း မတူညီစွာ သတ်မှတ်ထားသည်-

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

Результат:

ဥပမာ

ယခုတွင် အပေါ်နှင့် အောက်နယ်နမိတ်မျဉ်းများအတွက် solid အမျိုးအစားကို သတ်မှတ်ထားပြီး ညာနှင့် ဘယ်ဘက်များအတွက် dotted အမျိုးအစားကို သတ်မှတ်ထားသည်-

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

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

Результат:

ဆက်လက်ဖတ်ရှုရန်