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

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

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

Setzen eines soliden blauen Umrisses

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