⌘K

Egenskapen outline-style

Egenskapen outline-style anger stilen på den yttre ramen - en gräns som inte tar upp plats.

Syntax

cssselektor {
  outline-style: värde;
}

Värden

Värde Beskrivning
solid Heldragen linje.
dotted Ram som punkter.
dashed Ram som streck.
ridge Ram som en upphöjd linje.
double Ram som en dubbellinje. För att se effekten måste ramtjockleken vara minst 3px.
groove Ingropt ram.
inset Nedtryckt ram.
outset Upphöjd ram.
none Ingen ram.

Standardvärde: none.

Exempel . Värde solid

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

Результат:

Exempel . Värde dotted

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

Результат:

Exempel . Värde dashed

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

Результат:

Exempel . Värde ridge

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

Результат:

Exempel . Värde double

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

Результат:

Exempel . Värde groove

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

Результат:

Exempel . Värde inset

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

Результат:

Exempel . Värde outset

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

Результат:

Se även

BackEgenskapen outline-widthNextEgenskapen outline-color