Svojstvo outline-style

Svojstvo outline-style postavlja stil spoljne ramove - granice koja ne zauzima mesto.

Sintaksa

cssselektor {
  outline-style: vrednost;
}

Vrednosti

Vrednost Opis
solid Puna linija.
dotted Ramova u obliku tačaka.
dashed Ramova u obliku crtica.
ridge Ramova u obliku ispupčene linije.
double Ramova u obliku duple linije. Da biste videli efekat debljina granice mora biti minimum 3px.
groove Udubljena ramova.
inset Ulegnuta ramova.
outset Ispupčena ramova.
none Odsustvo granice.

Podrazumevana 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;
}

Результат:

Vidite takođe