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

outline-style ဂုဏ်သတ္တိသည် နေရာမယူသော နယ်နိမိတ်မျဉ်းကြောင်း၏ အပြင်ဘက်ဘောင်၏ စတိုင်ကို သတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့ပုံ

cssselector {
  outline-style: value;
}

တန်ဖိုးများ

ပုံသေတန်ဖိုး - none.

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

ဖတ်ရှုရန်