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 CSS Eigenschaft legt die Farbe der Umrandung eines Elements fest.

Probieren Sie es aus

outline-color: red;

outline-color: #32a1ce;

outline-color: rgba(170, 50, 220, 0.6);

outline-color: hsla(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 unten aufgeführten Werte angegeben.

Werte

<color>

Die Farbe der Umrandung, 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

Eine Umrandung ist eine Linie, die um ein Element herum gezogen wird, außerhalb des border. Anders als die Begrenzung eines Elements wird die Umrandung außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Die Begrenzung hingegen verändert tatsächlich das Layout der Seite, um sicherzustellen, dass sie ohne Überlappung mit anderen Inhalten passt (es sei denn, Sie stellen explizit ein, dass sie überlappt).

Es ist oft praktischer, die Kurzform-Eigenschaft outline zu verwenden, wenn das Erscheinungsbild einer Umrandung definiert werden soll.

Barrierefreiheit

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

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der Text- und Hintergrundfarbenwerte bestimmt. Um den aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu entsprechen, 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,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

Formaler 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 festen blauen Umrandung

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