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

Anfangswertmedium
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch