CSS outline-style Eigenschaft
Die CSS-Eigenschaft outline-style legt den Stil des Rahmens eines Elements fest. Werte und Beispiele.
Die CSS-Eigenschaft outline-style legt den Linienstil des Umrisses eines Elements fest — zum Beispiel eine solid-, dashed- oder dotted-Linie. Ein Umriss (outline) ist eine Linie, die knapp außerhalb des Rahmens des Elements gezeichnet wird und alle vier Seiten gleichzeitig umgibt.
Diese Seite erklärt, wie jeder Umrissstil aussieht, wie sich outline-style von border-style unterscheidet, und zeigt ausführbare Beispiele für jeden Wert.
Wozu dient ein Umriss?
Umrisse werden am häufigsten verwendet, um den Fokus sichtbar zu machen. Wenn ein Benutzer mit der Tastatur zu einem Link, einer Schaltfläche oder einem Formularfeld navigiert, zeichnet der Browser einen Umriss, damit er sehen kann, wo er sich befindet. Das Entfernen dieses Umrisses ohne Ersatz beeinträchtigt die Barrierefreiheit für Tastaturbenutzer — daher ist es besser, ihn neu zu gestalten, anstatt ihn zu löschen.
Der Umriss unterscheidet sich vom border in zwei wichtigen Punkten:
- Er nimmt keinen Platz ein. Der Umriss wird außerhalb der Rahmenkante gezeichnet und beeinflusst das Layout nicht. Das Hinzufügen oder Ändern eines Umrisses verschiebt daher niemals benachbarte Elemente. Die width und height des Elements schließen den Umriss nicht ein.
- Einzelne Seiten oder Ecken lassen sich nicht separat steuern. Im Gegensatz zu Rahmen kann man an jeder Seite keinen anderen Umriss setzen, und ein einfacher Umriss folgt dem Kasten, nicht seinem
border-radius.
Damit ein Umriss sichtbar ist, muss outline-style auf einen anderen Wert als none gesetzt werden — diese Eigenschaft „schaltet den Umriss ein". Kombinieren Sie sie mit outline-color und outline-width, oder verwenden Sie die Kurzschreibweise outline, um alle drei auf einmal zu setzen.
Die Eigenschaft outline-style akzeptiert die folgenden Werte:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Die Werte groove, ridge, inset und outset erzeugen einen 3D-Effekt, indem der Umriss basierend auf der outline-color schattiert wird. Der Effekt ist bei einer größeren Breite und einer mittleren Farbe am deutlichsten sichtbar — bei reinem Schwarz oder Weiß ist er kaum wahrnehmbar.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.outlineStyle = "dotted" |
Syntax
CSS outline-style Syntax
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Beispiel der outline-style-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>Outline property example</h2>
<p class="p1">This is a paragraph with outline set to solid.</p>
<p class="p2">This is a paragraph with outline set to dashed.</p>
<p class="p3">This is a paragraph with outline set to dotted.</p>
<p class="p4">This is a paragraph with outline set to double.</p>
<p class="p5">This is a paragraph with outline set to none.</p>
<p class="p6">This is a paragraph with outline set to groove.</p>
<p class="p7">This is a paragraph with outline set to ridge.</p>
<p class="p8">This is a paragraph with outline set to inset.</p>
<p class="p9">This is a paragraph with outline set to outset.</p>
</body>
</html>Ergebnis
Beispiel der outline-style-Eigenschaft mit allen Werten:
CSS outline-style weiteres Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Dieses zweite Beispiel verwendet die Kurzschreibweise outline, um Stil, Breite und Farbe gemeinsam zu setzen — zum Beispiel outline: 4px dotted gray.
Beispiel der outline-style-Eigenschaft mit dem Wert „groove":
Beispiel der outline-style-Eigenschaft mit dem groove-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #7f7fa7;
text-align: center;
outline-width: 8px;
outline-style: groove;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to groove.</p>
</body>
</html>Beispiel der outline-style-Eigenschaft mit dem Wert „ridge":
Beispiel der outline-style-Eigenschaft mit dem ridge-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: ridge;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to ridge.</p>
</body>
</html>Beispiel der outline-style-Eigenschaft mit dem Wert „inset":
Beispiel der outline-style-Eigenschaft mit dem inset-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: inset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to inset.</p>
</body>
</html>Beispiel der outline-style-Eigenschaft mit dem Wert „outset":
Beispiel der outline-style-Eigenschaft mit dem outset-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: outset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to outset.</p>
</body>
</html>Beispiel der outline-style-Eigenschaft mit dem Wert „dotted":
Beispiel der outline-style-Eigenschaft mit dem dotted-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dotted;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dotted.</p>
</body>
</html>Beispiel der outline-style-Eigenschaft mit dem Wert „dashed":
Beispiel der outline-style-Eigenschaft mit dem dashed-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dashed;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dashed.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Zeigt keinen Umriss. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| hidden | Identisch mit none für Umrisse (der Wert existiert zur Konsistenz mit border-style). | Ausprobieren » |
| dotted | Der outline wird als eine Reihe von Punkten dargestellt. | Ausprobieren » |
| dashed | Der Umriss wird als eine Reihe von Strichen dargestellt. | Ausprobieren » |
| solid | Der Umriss wird als durchgehende Linie dargestellt. | Ausprobieren » |
| double | Der Umriss wird als doppelte durchgehende Linie dargestellt. | Ausprobieren » |
| groove | Gibt einen 3D-gerillten Umriss an. | Ausprobieren » |
| ridge | Gibt einen 3D-erhabenen outline an. | Ausprobieren » |
| inset | Gibt einen eingebetteten Umriss an. | Ausprobieren » |
| outset | Gibt einen geprägten Umriss an. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Tipps und häufige Fallstricke
outline-styleallein kann unsichtbar sein. Ohne gesetzter Breite oder Farbe ist die Standard-Umrissbreitemediumund die FarbecurrentColor, sodass er meistens sichtbar ist — aber wenn Sieoutline-width: 0setzen, wird er nicht angezeigt. Verwenden Sie die Kurzschreibweise outline, um explizit zu sein.- Löschen Sie Fokus-Umrisse nicht einfach.
outline: noneentfernt den Fokusring für die Tastaturnavigation. Falls ein Design dies erfordert, ersetzen Sie ihn durch einen benutzerdefinierten Umriss oder einenbox-shadow-Fokusstil, damit Tastaturbenutzer den Fokus weiterhin sehen können. - Verwenden Sie
outline-offsetfür mehr Abstand. Da der Umriss standardmäßig direkt am Rahmen anliegt, schiebt die Eigenschaftoutline-offsetihn nach außen (oder mit einem negativen Wert nach innen), ohne das Layout zu beeinflussen. - Umriss vs. Rahmen. Greifen Sie auf einen outline zurück, wenn Sie einen Indikator benötigen, der die Boxgröße oder -position nicht verändern darf; greifen Sie auf einen border zurück, wenn die Linie Teil des Layouts des Elements ist.
Verwandte Eigenschaften
- outline — Kurzschreibweise für
outline-width,outline-styleundoutline-color. - outline-color — legt die Farbe des Umrisses fest.
- outline-width — legt die Dicke des Umrisses fest.
- border — das platzbeanspruchende Gegenstück zu Umrissen.