⌘K

Egenskaben outline-style

Egenskaben outline-style angiver stilen på den eksterne ramme - en grænse, der ikke optager plads.

Syntaks

cssselektor {
  outline-style: værdi;
}

Værdier

Værdi Beskrivelse
solid Udfyldt linje.
dotted Ramme som prikker.
dashed Ramme som stiplet linje.
ridge Ramme som oppustet linje.
double Ramme som dobbelt linje. For at se effekten skal rammens tykkelse være mindst 3px.
groove Indsunket ramme.
inset Nedsænket ramme.
outset Oppustet ramme.
none Ingen ramme.

Standardværdi: none.

Eksempel . Værdien solid

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

Результат:

Eksempel . Værdien dotted

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

Результат:

Eksempel . Værdien dashed

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

Результат:

Eksempel . Værdien ridge

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

Результат:

Eksempel . Værdien double

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

Результат:

Eksempel . Værdien groove

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

Результат:

Eksempel . Værdien inset

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

Результат:

Eksempel . Værdien outset

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

Результат:

Se også

BackEgenskaben outline-widthNextEgenskaben outline-color