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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mithilfe der Eigenschaft outline-style können Sie verschiedene Schmuckrahmen für die Außenlinie definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Dicke oder zur Farbe der Außenlinie.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>outline-style</title>
	<style>
	   p {
             margin: 20px;
             padding: 10px;
             width: 30em;
             outline-width: 5px; 
             outline-color: red;
           }
	   .dotted { outline-style: dotted; }
	   .dashed { outline-style: dashed; }
	   .solid  { outline-style: solid; }
	   .double { outline-style: double; }
	   .groove { outline-style: groove; }
	   .ridge  { outline-style: ridge; }
	   .inset  { outline-style: inset; }
	   .outset { outline-style: outset; }
    </style> 
  </head>
  <body>
    <p class="dotted">Textabsatz mit Außenlinientyp dotted.</p>
    <p class="dashed">Textabsatz mit Außenlinientyp dashed.</p>
    <p class="solid">Textabsatz mit Außenlinientyp solid.</p>
    <p class="double">Textabsatz mit Außenlinientyp double.</p>
    <p class="groove">Textabsatz mit Außenlinientyp groove.</p>
    <p class="ridge">Textabsatz mit Außenlinientyp ridge.</p>
    <p class="inset">Textabsatz mit Außenlinientyp inset.</p>
    <p class="outset">Textabsatz mit Außenlinientyp outset.</p>
  </body>
</html>

Mit outline-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben

  • none = keine Außenlinie (bzw. unsichtbare Außenlinie).
  • hidden = keine Außenlinie (bzw. unsichtbare Außenlinie), gedacht für Tabellenzellen
  • dotted = gepunktet.
  • dashed = gestrichelt.
  • solid = durchgezogen.
  • double = doppelt durchgezogen.
  • groove = 3D-Effekt.
  • ridge = 3D-Effekt.
  • inset = 3D-Effekt.
  • outset = 3D-Effekt.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML