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 der Kontur 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

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 nachfolgend aufgeführten Werte angegeben.

Werte

<color>

Die Farbe der Kontur, angegeben als <color>.

Die Spezifikation listet auch einen zusätzlichen Wert, auto, der derzeit in keinem Browser unterstützt wird. Wenn er implementiert wird, berechnet sich auto zu currentcolor, es sei denn, outline-style ist auf auto gesetzt, dann wird er zur Accentfarbe berechnet.

Beschreibung

Eine Kontur ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb des border. Im Gegensatz zum Rand des Elements wird die Kontur außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Der Rand hingegen wird das Layout der Seite tatsächlich so ändern, dass es passt, ohne andere Inhalte zu überlappen (es sei denn, Sie setzen ihn explizit auf Überlappung).

Es ist oft praktischer, die Kurzschreibweiseigenschaft outline zu verwenden, wenn das Erscheinungsbild einer Kontur definiert wird.

Barrierefreiheit

Benutzerdefinierte Fokus-Stile erfordern häufig Anpassungen der outline-Eigenschaft. Wenn die Farbe der Kontur angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen ihr und dem Hintergrund, über dem die Kontur platziert ist, hoch genug ist, damit Menschen mit Sehbehinderungen sie wahrnehmen können.

Das Kontrastverhältnis der Farben wird durch den Vergleich der Leuchtdichten der Text- und Hintergrundfarbwerte bestimmt. 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ößeren Text, wie z.B. Überschriften, erforderlich. Großer Text ist definiert als 18,66px und fett oder größer, oder 24px oder größer.

Formale Definition

Anfangswertauto
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 einer soliden blauen Kontur

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

Siehe auch