⌘K

Atribuut outline-style

Atribuut outline-style määrab välisääre stiili - piiri, mis ei võta ruumi.

Süntaks

cssselektor {
  outline-style: väärtus;
}

Väärtused

Väärtus Kirjeldus
solid Pidev joon.
dotted Punktidest koosnev äär.
dashed Kriipsudest koosnev äär.
ridge Kumer joon.
double Topeltjooneline äär. Et efekti näha, peab ääre paksus olema vähemalt 3px.
groove Nõgus äär.
inset Sissepressitud äär.
outset Väljaulatuw äär.
none Piiri puudumine.

Vaikeväärtus: none.

Näide . Väärtus solid

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus dotted

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus dashed

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus ridge

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus double

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus groove

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus inset

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Näide . Väärtus outset

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Vaata ka

BackOmadus outline-widthNextAtribuut outline-color