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 bestimmt den Abstand zwischen einem Umriss (outline) und dem Rand oder der Begrenzung eines Elements.

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 Raums zwischen dem Element und seinem Umriss. Ein negativer Wert platziert den Umriss innerhalb des Elements. Ein Wert von 0 platziert den Umriss so, dass kein Raum zwischen ihm und dem Element ist.

Beschreibung

Ein Umriss ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb des Randbereichs. Der Raum zwischen einem Element und seinem Umriss ist transparent. Mit anderen Worten, er ist wie der Hintergrund des Elternelements.

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

BCD tables only load in the browser

Siehe auch