CSS outline-offset-Eigenschaft

Die outline-offset-Eigenschaft wird verwendet, um den Abstand zwischen einer Umrandung (Outline) und der Kantenkante eines Elements festzulegen. Der Bereich zwischen der Umrandung und dem Element ist transparent.

Es gibt drei Unterschiede zwischen Umrandungen (Outlines) und Rändern (Borders):

eine Umrandung ist eine Linie, die außerhalb der Kantenkante des Elements gezeichnet wird,
eine Umrandung kann unregelmäßig (nicht rechteckig) sein,
eine Umrandung nimmt keinen Platz ein.

Diese Eigenschaft ist eine der CSS3-Eigenschaften.

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

Anfangswert	0
Anwendbar auf	Alle Elemente.
Vererbbar	Nein.
Animierbar	Ja. Die Breite des Abstands ist animierbar.
Version	CSS3
DOM-Syntax	object.style.outlineOffset = "20px";

Syntax

CSS-Syntax für outline-offset

css

outline-offset: length | initial | inherit;

Beispiel für die outline-offset-Eigenschaft:

CSS-Codebeispiel für outline-offset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        margin: 20px;
        border: 2px dotted #000;
        background-color: #8ebf42;
        outline: 4px solid #666;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS outline-offset values list

Im angegebenen Beispiel beträgt der Abstand zwischen Umrandung und Kantenkante 10px.

Werte

Wert	Beschreibung
length	Abstand zwischen Umrandung und der Kantenkante eines Elements. Der Standardwert ist 0.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Praxis

Was lässt sich über die CSS outline-offset-Eigenschaft gemäß den auf der angegebenen URL bereitgestellten Informationen sagen?

Die outline-offset-Eigenschaft ist nicht Teil des CSS-Standards.Die outline-offset-Eigenschaft fügt einen Abstand zwischen einer Umrandung und der Kante/dem Rand eines Elements hinzu.Die outline-offset-Eigenschaft erlaubt nur positive Werte, wobei der Standardwert 0 ist.Der Anfangs-/Standardwert der outline-offset-Eigenschaft ist 0.Die outline-offset-Eigenschaft erbt den Wert von ihrem übergeordneten Element.Prozentuale Werte können mit der outline-offset-Eigenschaft verwendet werden.

CSS outline-offset-Eigenschaft ​

Syntax ​

Beispiel für die outline-offset-Eigenschaft: ​

Ergebnis ​