⌘K

Lastnost outline-style

Lastnost outline-style določa slog zunanjega obroba - meje, ki ne zavzema prostora.

Sintaksa

cssselektor {
  outline-style: vrednost;
}

Vrednosti

Vrednost Opis
solid Polna črta.
dotted Obroba v obliki pik.
dashed Obroba v obliki črtic.
ridge Obroba v obliki izbočene črte.
double Obroba v obliki dvojne črte. Za učinek mora biti debelina obrobe vsaj 3px.
groove Vbočena obroba.
inset Vtisnjena obroba.
outset Izbočena obroba.
none Brez obrobe.

Privzeta vrednost: none.

Primer . Vrednost solid

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

Результат:

Primer . Vrednost dotted

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

Результат:

Primer . Vrednost dashed

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

Результат:

Primer . Vrednost ridge

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

Результат:

Primer . Vrednost double

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

Результат:

Primer . Vrednost groove

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

Результат:

Primer . Vrednost inset

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

Результат:

Primer . Vrednost outset

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

Результат:

Glejte tudi

BackLastnost outline-widthNextLastnost outline-color