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
Medien	visuell, interaktiv
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 `rgb(0,0,0)`.
Animationstyp	Farbe
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

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> | invertwobei 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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.	Anwärter 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

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.