CSS-Eigenschaft outline

Eine Outline ist eine Linie, die außerhalb der Grenzen gezeichnet wird. Der Umriss ist auf allen Seiten gleich. Ein Umriss und ein Rand sind ähnlich, aber es gibt viele Unterschiede.

Wenn Sie mithilfe der Eigenschaft border-radius Grenzen runden können, kann die Eigenschaft outline nicht gerundet werden.

Die Eigenschaft outline property allows to create multiple borders around an element.ermöglicht es, mehrere Rahmen um ein Element herum zu erstellen.

Die Eigenschaft outline ist eine Abkürzung für die Eigenschaften:

Die Eigenschaft outline-color funktioniert nicht, wenn sie allein verwendet wird.

Die Breite und Höhe des Elements beinhaltet nicht die Breite des Umrisses. Sie muss separat angegeben werden.

Anfangswert medium invert color
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja, der Umriss des Elements ist animierbar.
Version CSS2
DOM Syntax object.style.outline = "#eee dashed 10px";

Syntax

outline: outline-width | outline-style | outline-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.dotted {outline:dotted;}
      p.dashed {outline: dashed;}
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline</h2>
    <p class="dotted">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. </p>
    <p class="dashed">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Im angegebenen Beispiel ist die Eigenschaft outline-style des ersten Elements gestrichelt, und das des zweiten Elements ist gestrichelt.

Im folgenden Beispiel hat das erste Element keinen Rand, das zweite einen Rand. Beachten Sie, dass sich die Kontur des zweiten Elements außerhalb seines Randes befindet:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.ex1 {
      outline-style: solid;
      outline-width: thick;  
      }
      div.ex2 {
      border: 1px solid #fc7f01;
      outline-style: solid;
      outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline</h2>
    <div class="ex1">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
    <br>
    <div class="ex2">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Ein weiteres Beispiel mit der Eigenschaft outline-color . Der Umriss liegt außerhalb des Randes des zweiten Elements:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.blue {
      outline-style: solid;
      outline-color: #1c87c9;
      }
      div.green {
      border: 1px solid black;
      outline-style: solid;
      outline-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline</h2>
    <div class="blue">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
    <br>
    <div class="green">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Werte

Wert/th> Beschreibung
outline-width Definiert die Breite des Umrisses.
outline-style Definiert den Stil des Umrisses.
outline-color Definiert die Farbe des Umrisses.
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+ 12.0+ 1.5+ 1.2+ 7.0+

Übe dein Wissen

Welche Werte können Sie für die 'outline-style' CSS-Eigenschaft festlegen?
Finden Sie das nützlich?