CSS outline-Eigenschaft
Eine Outline ist eine Linie, die außerhalb der Ränder gezeichnet wird. Sie ist auf allen Seiten gleich. Die outline-Eigenschaft ist eine Kurzschreibweise für:
Die outline-color-Eigenschaft funktioniert nicht, wenn sie allein verwendet wird, da der Standardwert für outline-style none ist. Outlines nehmen keinen Platz ein und beeinflussen die Layoutabmessungen des Elements nicht.
Outlines vs. Borders
Eine Outline und ein Border sind sich ähnlich, weisen jedoch viele Unterschiede auf. Im Gegensatz zu Borders sind Outlines streng rechteckig und können nicht über die border-radius-Eigenschaft abgerundet werden. Die outline-Eigenschaft zeichnet eine einzelne Linie außerhalb der Border-Kante des Elements. Outlines nehmen keinen Platz ein, da sie sich außerhalb des Inhalts eines Elements befinden.
| Initial Value | medium none currentcolor |
|---|---|
| Applies to | Alle Elemente. Gilt auch für ::first-letter. |
| Inherited | Nein. |
| Animatable | Ja. Die Outline des Elements ist animierbar. |
| Version | CSS2 |
| DOM Syntax | object.style.outline = "#eee dashed 10px"; |
Syntax
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Beispiel für die outline-Eigenschaft:
CSS outline Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</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>
</body>
</html>Ergebnis
Im angegebenen Beispiel ist der outline-style des ersten Elements dotted (punktiert) und der des zweiten Elements dashed (gestrichelt).
Im folgenden Beispiel hat das erste Element keinen border, das zweite schon. Beachten Sie, dass sich die Outline des zweiten Elements außerhalb seines Borders befindet:
Beispiel für die outline-Eigenschaft mit einem Element, das einen Border hat:
CSS outline und Border zusammen, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Im folgenden Beispiel befindet sich die Outline außerhalb des Borders des zweiten Elements.
Beispiel für die outline-color-Eigenschaft in Kombination mit der outline-style-Eigenschaft:
CSS outline, Farbcode-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| outline-width | Definiert die Breite der Outline. |
| outline-style | Definiert den Stil der Outline. |
| outline-color | Legt die Farbe der Outline fest. |
| outline-offset | Verschiebt die Outline relativ zur Border-Kante. |
| initial | Legt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Was gilt bezüglich der CSS outline-Eigenschaft?