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 April 2017.

Die outline-color-Eigenschaft von CSS legt die Farbe des Rands eines Elements fest.

Probieren Sie es aus

Syntax

css
/* <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 Eigenschaft outline-color wird als einer der unten aufgeführten Werte angegeben.

Werte

<color>

Die Farbe des Rands, 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 Rand ist eine Linie, die um ein Element außerhalb des border gezeichnet wird. Anders als der Rand des Elements wird der Rand außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Der Rand hingegen wird das Layout der Seite tatsächlich so verändern, dass er passt, ohne etwas anderes zu überlappen (es sei denn, Sie setzen es explizit so, dass es überlappt).

Es ist oft praktischer, die Kurzform-Eigenschaft outline zu verwenden, wenn man das Erscheinungsbild eines Rands definiert.

Barrierefreiheit

Angepasste Fokus-Stile beinhalten häufig Anpassungen der outline-Eigenschaft. Wenn die Farbe des Rands angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen ihm und dem Hintergrund, über dem der Rand platziert ist, hoch genug ist, damit Personen mit Sehbehinderungen es wahrnehmen können.

Das Farbkontrastverhältnis wird ermittelt, indem die Leuchtkraft der Text- und Hintergrundfarben verglichen wird. Um die aktuellen Web Content Accessibility Guidelines (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ßer Text wird definiert als 18,66px und fett oder größer oder 24px oder größer.

Formale Definition

Initialer Wertauto
Anwendbar aufalle Elemente
VererbtNein
Berechneter WertFü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).
AnimationstypFarbe

Formale Syntax

outline-color = 
  auto                      |
  [ <color> | <image-1D> ]  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Festlegen eines festen blauen Rands

HTML

html
<p>My outline is blue, as you can see.</p>

CSS

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

BCD tables only load in the browser

Siehe auch