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 den Abstand zwischen einer Kontur und dem Rand oder der Grenze eines Elements fest.

Probieren Sie es aus

outline-offset: 4px;

outline-offset: 0.6rem;

outline-offset: 12px;
outline: 5px dashed blue;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  border: 2px solid crimson;
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

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 Abstands 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 Abstand zwischen ihr und dem Element besteht.

Eine Kontur ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb der Begrenzungskante. Der Abstand zwischen einem Element und seiner Kontur ist transparent. Mit anderen Worten, er entspricht dem Hintergrund des übergeordneten Elements.

Formale Definition

Anfangswert	`0`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	Längenangabe

Formale Syntax

outline-offset = 
  <length>

Beispiele

Setzen des Konturenabstands in Pixel

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