outline-style հատկություն

outline-style հատկությունը սահմանում է արտաքին եզրագծի ոճը՝ սահման, որը տեղ չի զբաղեցնում:

Շարահյուսություն

cssընտրիչ {
  outline-style: արժեք;
}

Արժեքներ

Լռելյայն արժեքը՝ 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;
}

Результат:

Տես նաև