CSS outline-color Eigenschaft
Die CSS-Eigenschaft outline-color legt die Farbe des Rahmens eines Elements fest. Siehe Eigenschaftswerte und Beispiele.
Die CSS-Eigenschaft outline-color legt die Farbe des Rahmens eines Elements fest — die Linie, die direkt außerhalb der Randkante gezeichnet wird.
Ein Rahmen ähnelt einem border, weist jedoch zwei wichtige Unterschiede auf:
- Er beansprucht keinen Platz. Die width und height eines Elements schließen den Rahmen nicht ein, sodass das Hinzufügen oder Ändern eines Rahmens das umgebende Layout niemals verschiebt (im Gegensatz zu einem border, der Teil des Box-Modells ist).
- Er kann keine einzelnen Seiten haben. Ein Rahmen umhüllt das gesamte Element auf einmal; man kann nicht — wie bei border-color — eine andere Farbe nur oben oder links festlegen.
Da Rahmen außerhalb der Box liegen und die Seite nicht neu umbrechen, sind sie die Standardmethode, um den Tastaturfokus anzuzeigen. Wenn ein Benutzer durch Links, Schaltflächen und Formularfelder tabbt, zeichnet der Browser einen Fokusrahmen, damit er sehen kann, wo er sich befindet. Das macht outline-color in erster Linie zu einem Barrierefreiheitswerkzeug und erst in zweiter Linie zu einem dekorativen — seien Sie vorsichtig, bevor Sie Fokusrahmen entfernen oder ausblenden.
Wozu outline-color verwenden
outline-color wird hauptsächlich für Folgendes verwendet:
- Fokusstatus gestalten —
:focusoder:focus-visibleeine kontrastreiche, markenkonforme Rahmenfarbe statt der Browserstandardfarbe geben. - Ein Element hervorheben, ohne seine Größe zu ändern oder Nachbarelemente zu verschieben.
- Layout debuggen — ein temporärer heller Rahmen zeigt die genaue Ausdehnung eines Elements, ohne das Box-Modell zu beeinflussen.
outline-color hat allein keine sichtbare Wirkung. Ein Rahmen wird nur gerendert, wenn er auch einen Stil hat. Kombinieren Sie ihn daher mit der outline-Kurzschreibweise oder der Eigenschaft outline-style (deren Standardstil none ist).
Akzeptierte Farbwerte
Die Rahmenfarbe kann mit jeder standardmäßigen CSS-Farbe festgelegt werden: einem Farbnamen (red), einem hexadezimalen Code (#1c87c9) oder den funktionalen Notationen rgb(), rgba(), hsl() und hsla(). Das Schlüsselwort currentColor ist ebenfalls praktisch — es lässt den Rahmen mit der Textfarbe (color) des Elements übereinstimmen. Die vollständige Liste der Farbformate finden Sie im Abschnitt HTML-Farben.
| Anfangswert | invert |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Farbe ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.outlineColor = "#8ebf42"; |
Syntax
CSS outline-color Syntax
outline-color: invert | color | initial | inherit;Beispiel der outline-color-Eigenschaft:
CSS outline-color Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p>Invert default value is applied.</p>
</body>
</html>Ergebnis
Beispiel der outline-color-Eigenschaft mit hexadezimalen, RGB-, RGBA-, HSL- und HSLA-Farben:
CSS outline-color alle Werte Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-color: #1c87c9;
}
.p2 {
outline-style: solid;
outline-color: hsl(65, 100%, 50%);
}
.p3 {
outline-style: solid;
outline-color: hsla(84, 49%, 50%, 1);
}
.p4 {
outline-style: solid;
outline-color: rgb( 224, 0, 0);
}
.p5 {
outline-style: solid;
outline-color: rgba(204, 204, 204, 1);
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p class="p1">This is a paragraph with hexadecimal blue outline.</p>
<p class="p2">This is a paragraph with hsl yellow outline.</p>
<p class="p3">This is a paragraph with hsla green outline.</p>
<p class="p4">This is a paragraph with rgb red outline.</p>
<p class="p5">This is a paragraph with rgba grey outline.</p>
</body>
</html>Jeder Absatz behält ein identisches Layout — nur die Rahmenfarbe ändert sich — weil der Rahmen außerhalb der Box liegt und keine Breite oder Höhe hinzufügt.
Beispiel zur Gestaltung eines Fokusrahmens:
Die häufigste reale Anwendung von outline-color ist es, den Tastaturfokus sichtbar und markenkonform zu gestalten. Hier erhält ein Link einen dicken blauen Fokusrahmen anstelle des Browserstandardrahmens:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:focus-visible {
outline-style: solid;
outline-width: 3px;
outline-color: #1c87c9;
outline-offset: 2px;
}
</style>
</head>
<body>
<h2>Focus outline example</h2>
<p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
<a href="#">Focus me with the keyboard</a>
</body>
</html>Die Eigenschaft outline-offset rückt den Rahmen einige Pixel vom Element weg, sodass er den Text nicht berührt. Verwenden Sie :focus-visible anstelle von :focus, damit der Rahmen für Tastaturbenutzer erscheint, aber nicht bei Mausklicks.
Vermeiden Sie outline: none oder outline-color: transparent bei fokussierbaren Elementen, sofern Sie den Fokusindikator nicht durch etwas gleich Sichtbares ersetzen. Das Entfernen macht die Seite für reine Tastaturbenutzer unbrauchbar.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| invert | Invertiert jede Farbe, die auf den Hintergrund angewendet wird. Dieser Wert stellt die Sichtbarkeit des Rahmens unabhängig von der Hintergrundfarbe sicher. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| color | Legt die Rahmenfarbe fest. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() oder das Schlüsselwort currentColor können verwendet werden. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
outline-color ist eine der drei Einzeleigenschaften, die die outline-Kurzschreibweise bilden:
- outline-style — legt den Linienstil fest (
solid,dashed,double, …). Erforderlich, damit der Rahmen angezeigt wird. - outline-width — legt die Stärke der Linie fest.
- outline-offset — legt den Abstand zwischen Rahmen und Randkante fest.
Das Schreiben von outline: 3px solid #1c87c9; ist eine Kurzschreibweise, um Breite, Stil und Farbe auf einmal festzulegen.