outline-offset

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 outline-offset CSS Eigenschaft legt die Menge an Raum zwischen einem Kontur und dem Rand oder der Grenze eines Elements fest.

Probieren Sie es aus

Syntax

css
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

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

Werte

<length>

Die Breite des Raums zwischen dem Element und seiner Kontur. Ein negativer Wert platziert die Kontur innerhalb des Elements. Ein Wert von 0 platziert die Kontur so, dass kein Raum zwischen ihr und dem Element besteht.

Beschreibung

Eine Kontur ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb der Randlinie. Der Raum zwischen einem Element und seiner Kontur ist transparent. Mit anderen Worten, er ist derselbe wie der des Elternelements Hintergrund.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypLängenangabe

Formale Syntax

outline-offset = 
<length>

Beispiele

Festlegen des Outline-Offsets in Pixeln

HTML

html
<p>Gallia est omnis divisa in partes tres.</p>

CSS

css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

Ergebnis

Spezifikationen

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

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-offset

Legend

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

Full support
Full support
See implementation notes.

Siehe auch