CSS-Eigenschaft outline-style

Die Eigenschaft outline-style definiert den Stil einer Outline.

Die Eigenschaft outline-style hat die folgenden Werte:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Anfangswerte none
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS2
DOM Syntax object.style.outlineStyle = "dotted"

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .p1{
      outline-style: solid;
      }
      .p2{
      outline-style: dashed;
      }
      .p3{
      outline-style: dotted;
      }
      .p4{
      outline-style: double;
      }
      .p5{
      outline-style: none; /*hidden*/
      }
      .p6{
      outline-style: groove;
      outline-color: #ccc;
      }
      .p7{
      outline-style: ridge;
      outline-color: #ccc;
      }
      .p8{
      outline-style: inset;
      outline-color: #ccc;
      }
      .p9{
      outline-style: outset;
      outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft outline</h2>
    <p class="p1">Das ist ein Absatz, wo der Umriss auf solid eingestellt ist.</p>
    <p class="p2">Das ist ein Absatz, wo der Umriss auf dashed eingestellt ist.</p>
    <p class="p3">Das ist ein Absatz, wo der Umriss auf dotted eingestellt ist.</p>
    <p class="p4">Das ist ein Absatz, wo der Umriss auf double eingestellt ist.</p>
    <p class="p5">Das ist ein Absatz, wo der Umriss auf none eingestellt ist.</p>
    <p class="p6">Das ist ein Absatz, wo der Umriss auf groove eingestellt ist.</p>
    <p class="p7">Das ist ein Absatz, wo der Umriss auf ridge eingestellt ist.</p>
    <p class="p8">Das ist ein Absatz, wo der Umriss auf inset eingestellt ist.</p>
    <p class="p9">Das ist ein Absatz, wo der Umriss auf outset eingestellt ist.</p>
  </body>
</html>

Ein anderes Beispiel, wo alle drei Umrisseigenschaften enthalten sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.dotted {outline: 4px dotted gray;}
      p.dashed {outline: 0.2em dashed rgb(142,191,66);}
      p.solid {outline: 4px solid #ccc;}
      p.double {outline: 4px double #000;}
      p.groove {outline: 4px groove #666;}
      p.ridge {outline: thick ridge #1c87c9;}
      p.inset {outline: medium inset #1c87c9;}
      p.outset {outline:  4px outset #1c87c9;}
    </style>
  </head>
  <body>
    <h2>Ein 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>
    <p class="solid">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
    <p class="double">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
    <p class="groove">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
    <p class="ridge">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
    <p class="inset">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
    <p class="outset">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</p>
  </body>
</html>

Werte

Wert Beschreibung
none Zeigt keine Umrisse. Das ist der Standardwert dieser Eigenschaft.
hidden Definiert einen versteckten Umriss.
dotted Der Umriss wird als eine Reihe von Punkten angegeben.
dashed Der Umriss wird als eine Reihe von Bindestrichen angegeben.
solid Der Umriss wird als durchgezogene Linie angegeben.
double Der Umriss wird als doppelte durchgezogene Linie angegeben.
groove Gibt eine 3D-Rillenumriss an.
ridge Gibt einen 3D-Rillenumriss an.
inset Gibt einen eingebetteten Umriss an.
outset Gibt einen geprägten Umriss an.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

1.0+ 12.0+ 1.5+ 1.2+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel