outline-color

Zusammenfassung

Die outline-color CSS-Eigenschaft bestimmt die Farbe der Outline (den Umriss) eines Elements. Eine Outline ist eine Linie, die au├čerhalb des Rahmens (border) um Elemente gezeigt wird, damit das Element hervorsticht.

Initialwertinvert f├╝r Browser, die es unterst├╝tzen, currentColor f├╝r die anderen
Anwendbar aufalle Elemente
VererbtNein
Berechneter WertF├╝r das Schl├╝sselwort invert ist der berechnete Wert invert. 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

Syntax

/* Keyword values */
outline-color: invert;
outline-color: red;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Werte

<color>
See <color> for the various color keywords and notations.
invert
To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid

Formal syntax

<color> | invert

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiel

HTML

<p class="example">My outline is blue, da ba dee.</p>

CSS

.example {
  /* first need to set "outline" */
  outline: 2px solid;
  /* make the outline blue */
  outline-color: #0000FF;
}

Live:

Spezifikationen

Specification Status Comment
CSS Basic User Interface Module Level 3
Die Definition von 'outline-color' in dieser Spezifikation.
Empfehlung No change
CSS Transitions
Die Definition von 'outline-color' in dieser Spezifikation.
Arbeitsentwurf Defines outline-color as animatable.
CSS Level 2 (Revision 1)
Die Definition von 'outline-color' in dieser Spezifikation.
Empfehlung Initial definition

Browser Kompatibilit├Ąt

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Ja) 1.5 (1.8) [1] 8.0 7.0 1.2 (125)
invert value Nicht unterst├╝tzt ? Nicht unterst├╝tzt [2] 8.0 Nicht unterst├╝tzt [3] Nicht unterst├╝tzt
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Ja) ? ? ? ?

[1] In versions previous to Gecko 1.8: -moz-outline-color.

[2] Support had been dropped in version 3.0 (1.9).

[3] Supported in Opera 7 but support was dropped in  Opera 15 with the adoption of Chromium/Blink engine.