outline-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die outline-color
CSS Eigenschaft legt die Farbe des Umrisses eines Elements fest.
Probieren Sie es aus
outline-color: red;
outline-color: #32a1ce;
outline-color: rgb(170 50 220 / 0.6);
outline-color: hsl(60 90% 50% / 0.8);
outline-color: currentcolor;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
Die outline-color
Eigenschaft wird als einer der unten aufgeführten Werte angegeben.
Werte
<color>
-
Die Farbe des Umrisses, angegeben als
<color>
.
Die Spezifikation listet auch einen zusätzlichen Wert, auto
, der derzeit in keinem Browser unterstützt wird. Wenn implementiert, wird auto
zu currentcolor
berechnet, es sei denn, outline-style
ist auf auto
gesetzt, dann wird es zur Akzentfarbe berechnet.
Beschreibung
Ein Umriss ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb des border
. Im Gegensatz zum Rahmen des Elements wird der Umriss außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Der Rahmen hingegen wird das Layout der Seite tatsächlich ändern, um sicherzustellen, dass er passt, ohne etwas anderes zu überlappen (es sei denn, Sie setzen ihn explizit so, dass er überlappt).
Es ist oft bequemer, die Kurzform-Eigenschaft outline
zu verwenden, wenn das Erscheinungsbild eines Umrisses definiert wird.
Barrierefreiheit
Benutzerdefinierte Fokus-Stile beinhalten häufig Anpassungen der outline
Eigenschaft. Wenn die Farbe des Umrisses angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen ihm und dem Hintergrund, über dem der Umriss platziert wird, hoch genug ist, damit Menschen mit Sehbeeinträchtigungen ihn wahrnehmen können.
Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit der Text- und Hintergrundfarben verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Große Texte sind definiert als 18,66px und fett oder größer oder 24px oder größer.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | Für das Schlüsselwort auto ist der berechnete Wert currentcolor . Für den Farbwert, falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das Schlüsselwort transparent wird zu rgba(0,0,0,0) . |
Animationstyp | Farbe |
Formale Syntax
Beispiele
Setzen eines soliden blauen Umrisses
HTML
<p>My outline is blue, as you can see.</p>
CSS
p {
outline: 2px solid; /* Set the outline width and style */
outline-color: #0000ff; /* Make the outline blue */
margin: 5px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-color |
Browser-Kompatibilität
Siehe auch
outline
outline-width
outline-style
- Der
<color>
Datentyp - Weitere farbbezogene Eigenschaften:
color
,background-color
,border-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, undcolumn-rule-color