⌘K

Īpašība outline-style

Īpašība outline-style nosaka stilu ārējai apmalei - robežai, kura neaizņem vietu.

Sintakse

cssselektors {
  outline-style: vērtība;
}

Vērtības

Vērtība Apraksts
solid Nepārtraukta līnija.
dotted Apmale punktu veidā.
dashed Apmale domuzīmju veidā.
ridge Apmale izliektas līnijas veidā.
double Apmale dubultlīnijas veidā. Lai redzētu efektu, apmales biezumam jābūt vismaz 3px.
groove Ieliekta apmale.
inset Iegrimusi apmale.
outset Izvirzīta apmale.
none Robežas neesamība.

Noklusējuma vērtība: none.

Piemērs . Vērtība solid

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

Результат:

Piemērs . Vērtība dotted

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

Результат:

Piemērs . Vērtība dashed

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

Результат:

Piemērs . Vērtība ridge

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

Результат:

Piemērs . Vērtība double

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

Результат:

Piemērs . Vērtība groove

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

Результат:

Piemērs . Vērtība inset

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

Результат:

Piemērs . Vērtība outset

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

Результат:

Skatiet arī

BackĪpašība outline-widthNextĪpašība outline-color