CSS-Eigenschaft outline-offset

Die Eigenschaft outline-offset definiert den Abstand zwischen einem Umriss und dem Buchschnitt eines Elements.

Die Eigenschaft outline-offset ist kein Teil der Shorthand-Eigenschaft outline. Sie muss separat angegeben werden.

Anfangswert 0
Gilt für Alle Elemente
Geerbt Nein
Animierbar Ja, die Breite der Leertaste ist animierbar.
Version CSS3
DOM Syntax object.style.outlineOffset = "20px";

Syntax

outline-offset: length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.ex1 {
      margin: 20px;
      border: 2px dotted #000;
      background-color: #8ebf42;
      outline: 4px solid #666;
      outline-offset: 10px;
      }  
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline-offset</h2>
    <div class="ex1">Outline-offset ist 10px</div>
  </body>
</html>

Im gegebenen Beispiel beträgt der Abstand zwischen Umriss und Rand 10px.

Werte

Wert Beschreibung
length Abstand zwischen Umriss und dem Rand eines Elements. Der Standardwert ist 0.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 15.0+ 1.5+ 1.2+ 9.5+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'outline-offset'?
Finden Sie das nützlich?