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+ |
Übe dein Wissen
Welche CSS-Eigenschaften sind gültige Werte für 'outline-style'?
Richtig!
Falsch!