CSS outline-style Eigenschaft

Definition und Verwendung

Die Eigenschaft outline-style wird verwendet, um den Stil der gesamten Kontur eines Elements zu setzen. Der Stil kann nicht none sein, andernfalls wird die Kontur nicht angezeigt.

outline (Kontur) ist eine Linie, die um ein Element gezeichnet wird und sich außerhalb der Kanten des Rahmens befindet. Sie kann zur Hervorhebung des Elements beitragen. Die outline-Eigenschaft setzt die Konturlinien um das Element.}

Anmerkung:Stellen Sie den outline-style-Attribute immer vor dem outline-color-Attribute. Ein Element kann nur dann die Farbe seiner Kontur ändern, wenn es eine Kontur hat.

Anmerkung:Die Konturlinien nehmen keinen Raum ein und sind nicht unbedingt rechteckig.

Weitere Informationen:

CSS-Tutorial:CSS Kontur

CSS Referenzhandbuch:outline-Eigenschaft

HTML DOM Referenzhandbuch:outlineStyle-Eigenschaft

Beispiel

Konturstil einstellen:

p
  {
  outline-style:dotted;
  }

Versuchen Sie es selbst

CSS-Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Eigenschaftswert

Wert Beschreibung
keine Standard. Definiert keine Kontur.
hidden Definiert eine versteckte Kontur.
dotted Definiert eine gepunktete Kontur.
dashed Definiert eine gepunktete Kontur.
solid Definiert eine durchgehende Kontur.
double Definiert eine doppelte Kontur. Die Breite der Linie entspricht dem Wert von outline-width.
groove Definiert eine 3D-eingezogene Kontur. Dieser Effekt hängt vom outline-color-Wert ab.
ridge Definiert eine 3D-hohe Kontur. Dieser Effekt hängt vom outline-color-Wert ab.
inset Definiert eine 3D-eingezogene Kontur. Dieser Effekt hängt vom outline-color-Wert ab.
outset Definiert eine 3D-hohle Kontur. Dieser Effekt hängt vom outline-color-Wert ab.
inherit Die Festlegung sollte die Einstellungen der Konturstile von den übergeordneten Elementen ableiten.

Technische Details

Standardwert: keine
Vererbbarkeit: nein
Version: CSS2
JavaScript-Syntax: object.style.outlineStyle="dotted"

TIY-Beispiel

Konturstil einstellen
Dieses Beispiel zeigt, wie man den Stil der Kontur einstellt.

Browser-Unterstützung

Die Zahlen in der Tabelle verweisen auf die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Anmerkung:Wenn !DOCTYPE definiert ist, unterstützt IE8 die outline-Eigenschaft.