CSS/Eigenschaften/äußere Gestaltung/Außenlinie/outline

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel beschreibt die CSS-Eigenschaft outline. Für die Struktur eines HTML-Dokuments siehe HTML/outline.


Die Eigenschaft outline ist eine Zusammenfassung der möglichen Einzelangaben zur Stärke, Linienstil und Farbe der Außenlinie. c

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>outline</title>
    <style>
      p { width: 30em; padding: 1em; margin: 3em; background-color: lightgrey; }
      .outline { outline: 1em solid green; }
      .border  { border: 1em solid red; }
     </style>
  </head>
  <body>
    <p class="outline">Textabsatz mit Außenlinie und ohne Rahmen</p>
    <p class="border">Textabsatz mit Rahmen und ohne Außenlinie</p>
    <p class="border outline">Textabsatz mit Rahmen und Außenlinie</p>
  </body>
</html>

Mit outline können Sie das Aussehen einer Außenlinie um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Typ und Farbe mit Leerzeichen dazwischen.

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge outline: width style color;.
Beachten Sie: Zusammenhängende Angaben für einzelne Seiten des Elements sind nicht möglich.
Beachten Sie: Zur Zeit (Version 37) scheint der Firefox die Farbangabe invert nicht in dieser Kurzschreibweise zu akzeptieren. Notiert man dagegen alle Eigenschaften einzeln, interpretiert Firefox dagegen auch diesen Farbwert korrekt (vgl. Beispiel zu outline-color).

Beachten Sie das unterschiedliche Verhalten des Rahmens bei Inline-Elementen, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>outline-vs-border für Inline-Elemente</title>
	<style>
	   p { width: 15em; line-height: 2; }
           span { padding: .1em .5em; }
	   .border  { border: 2px solid red; }
	   .outline { outline: 2px solid green; }
    </style> 
  </head>
  <body>
    <h2>border</h2>
    <p>
      <span class="border">Inline-Element mit erzwungenem Zeilenumbruch und Rahmen</span>
    </p>
    <h2>outline</h2>
    <p>
      <span class="outline">Inline-Element mit erzwungenem Zeilenumbruch und Außenlinie</span>
    </p>
  </body>	
</html>

Für den Rahmen können Sie dieses Verhalten mit der Eigenschaft box-decoration-break steuern.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML