border-color အခံ

border-color အခံသည် ဘေးအားလုံးအတွက် တစ်ပြိုင်နက်တည်း သို့မဟုတ် တစ်ဖက်စီအတွက် စွက်ထူး၏အရောင်းကို သတ်မှတ်ပေးသည်။ အခံ၏တန်ဖိုးအဖြစ် မည်သည့် အရောင်းအတွက် ယူနစ်များကိုမဆို အသုံးပြုနိုင်သည်။ စံထားရာတန်ဖိုး: ဘလောက်၏စာသားနှင့် တူညီသောအရောင်း။

ဤအခံသည် အောက်ပါအခံများအတွက် အတိုကောက်အခံဖြစ်သည်: border-left-color, border-right-color, border-top-color, border-bottom-color.

ဖွဲ့စည်းပုံ

cssselector {
  border-color: color;
}

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

အခံသည် 1, 2, 3 သို့မဟုတ် 4 တန်ဖိုးများကို ခြားနားချက်ဖြင့် သတ်မှတ်နိုင်သည်:

နမူနာ

ဘလောက်၏စွက်ထူးကို အနီရောင်သို့ ပြောင်းလဲကြပါစို့:

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

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

Результат:

နမူနာ

အထက်နှင့်အောက်ဘေးအတွက် အနီရောင်စွက်ထူး၊ ညာနှင့်ဘယ်ဘေးအတွက် အပြာရောင် စွက်ထူးကို သတ်မှတ်ကြပါစို့:

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

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

Результат:

နမူနာ

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

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

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: red blue green 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;
}

Результат:

နမူနာ

စွက်ထူး၏အရောင်းကို border-color တွင် မသတ်မှတ်ထားပါက - ၎င်းကို color အခံမှ ယူသွားမည်:

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

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

Результат:

ဤအရာကိုလည်း ကြည့်ပါ