CSS-Eigenschaft outline

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.