text-decoration-color
Zusammenfassung
Mit der CSS-Eigenschaft text-decoration-color
kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch text-decoration-line
. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.
Initialwert | currentcolor |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US). |
Vererbt | Nein |
Berechneter Wert | berechnete Farbe |
Animationstyp | Farbe |
Syntax
Formale Syntax:<color>wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <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>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
text-decoration-color: currentColor text-decoration-color: red text-decoration-color: #00ff00 text-decoration-color: rgba(255, 128, 128, 0.5) text-decoration-color: transparent text-decoration-color: inherit
Werte
<color>
- Die Eigenschaft
color
akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe<color>
-Werte für genauere Details.
Beispiel
.beispiel {
text-decoration: underline;
text-decoration-color: red;
}
Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.
<!DOCTYPE html>
<html>
<head>
<style>
.beispiel {
font-size: 24px;
text-decoration: underline;
color: red;
}
.beispiel:hover {
color: blue;
text-decoration: line-through;
}
</style>
</head>
<body>
<span class="beispiel">
<span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span>
</span>
</body>
</html>
Spezifikationen
Spezifikation | Status | Anmerkung |
---|---|---|
Unknown Die Definition von 'text-decoration-color' in dieser Spezifikation. |
Unbekannt |
Browserkompabilität
Funktion | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Elementare Unterstützung | ? | 6.0 (6.0)-moz (en-US) | ? | ? | ? |
Funktion | Android | Firefox mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Elementare Unterstützung | ? | 6.0 (6.0)-moz (en-US) | ? | ? | ? |