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 eines 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 außerdem einen zusätzlichen Wert auto auf, der derzeit in keinem Browser unterstützt wird. Wenn dieser implementiert wird, wird auto zu currentColor berechnet, es sei denn, outline-style ist auf auto gesetzt, dann wird es auf die 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 überlagern. Der Rahmen wird hingegen tatsächlich das Layout der Seite ändern, um sicherzustellen, dass er passt, ohne etwas anderes zu überlappen (es sei denn, Sie stellen ihn explizit auf Überlappung ein).

Es ist oft praktischer, die Kurzform-Eigenschaft outline zu verwenden, um das Aussehen eines Umrisses zu definieren.

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 diesem und dem Hintergrund, über dem der Umriss platziert ist, hoch genug ist, damit Menschen mit Sehbehinderungen es wahrnehmen können.

Das Kontrastverhältnis wird ermittelt, indem die Leuchtkraft der Text- und Hintergrundfarbwerte 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ößeren Text wie Überschriften erforderlich. Großer Text ist definiert als 18,66 px und fett oder größer, oder 24 px 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 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: blue; /* Set the outline color */
  margin: 5px;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# outline-color

Browser-Kompatibilität

Siehe auch