CSS text-decoration-color 属性值说明
| 值 | 描述 |
|---|---|
| color | 定义文本装饰颜色。可以使用颜色名称,十六进制颜色代码,RGB(),RGBA(),HSL(),HSLA()。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
text-decoration-color 属性用于设置文本装饰的颜色。
我们可以从这里的 HTML 颜色中选择颜色。
在此属性的值范围内,可以将颜色应用于此类装饰,如上划线、下划线和波浪线。
text-decoration-color 属性是 CSS3 属性之一。
| 初始值 | 当前颜色 |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 是的。颜色是有动画的。 |
| 版本 | CSS1,CSS3 |
| DOM 语法 | object.Style.TextDecorationColor =“#ccc”; |
语法
text-decoration-color: color | initial | inherit;
text-decoration-color 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
-webkit-text-decoration-color: #8ebf42;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color 属性示例</h2>
<p>生活终归还得继续。...</p>
</body>
</html>
结果
在给定的示例中,使用了 Safari 的 -webkit- 扩展。
带有“underline”和“line-through”值的 text-decoration-color 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color 属性示例</h2>
<p>把痛苦停在昨天 把<s>微笑</s> 留给明天。</p>
</body>
</html>
日期:2020-06-02 22:14:47 来源:oir作者:oir
