outline-color CSS property

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

/* <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 der Kontur, angegeben als <color>.

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

Beschreibung

Eine Kontur ist eine Linie, die um ein Element 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 etwas anderes zu überlappen (es sei denn, Sie stellen es ausdrücklich so ein, dass es überlappt).

Es ist oft praktischer, die Kurzform-Eigenschaft outline zu verwenden, wenn das Aussehen einer Kontur definiert wird.

Barrierefreiheit

Benutzerdefinierte Fokus-Stile beinhalten normalerweise Anpassungen der outline-Eigenschaft. Wenn die Farbe der Kontur angepasst wird, ist es wichtig sicherzustellen, dass der Kontrast zwischen ihr und dem Hintergrund, über dem die Kontur gelegt ist, hoch genug ist, damit Personen mit Sehbehinderungen sie wahrnehmen können.

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft von Text- und Hintergrundfarbwerten 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 Überschriften erforderlich. Großer Text ist definiert als 18,66px und fett oder größer oder 24px oder größer.

• WebAIM: Farbkontrastprüfer
• MDN Verständnis WCAG, Leitfaden 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0

Formale Definition

Formale Syntax

outline-color = 
  auto                  |
  <'border-top-color'>  

<border-top-color> = 
  <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

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

CSS

p {
  outline: 2px solid; /* Set the outline width and style */
  outline-color: blue; /* Set the outline color */
  margin: 5px;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• outline
• outline-width
• outline-style
• Der <color> Datentyp
• Andere farbbezogene Eigenschaften: color, background-color, border-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, und column-rule-color