outline-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Die CSS outline-width-Eigenschaft legt die Dicke der Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb des border.

Probieren Sie es aus

Es ist oft praktischer, die Kurzschreibweise outline zu verwenden, um das Erscheinungsbild einer Kontur zu definieren.

Syntax

css
/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.1em;

/* Global values */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;

Die outline-width-Eigenschaft wird mit einem der unten aufgeführten Werte angegeben.

Werte

<length>

Die Breite der Kontur, angegeben als <length>.

thin

Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 1px in Desktop-Browsern (einschließlich Firefox).

medium

Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 3px in Desktop-Browsern (einschließlich Firefox).

thick

Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 5px in Desktop-Browsern (einschließlich Firefox).

Formale Definition

Initialer Wertmedium
Anwendbar aufalle Elemente
VererbtNein
Berechneter Werteine absolute Länge; falls das Schlüsselwort none angegeben wurde, ist der berechnete Wert 0
AnimationstypLängenangabe

Formale Syntax

outline-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Beispiele

Festlegen der Konturbreite eines Elements

HTML

html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# outline-width

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch