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.

Initialwert	`invert` für Browser, die es unterstützen, `currentColor` für die anderen
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	Fü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)`.
Animationstyp	Farbe

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

outline-color = 
  <color>  |
  invert   

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

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)

Desktop
Mobile

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.