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
<color> | invertwobei
<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
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.