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 | wie die jeweiligen Kurzschreibweisen:
|
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 |
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( <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.