CSS text-decoration-color 属性
改变下划线文本中下划线的颜色:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red;
/* 针对 Firefox 的代码 */
}
</style>
</head>
<body>
<p>
线条的颜色现在应该是红色!
</p>
<p><b>注意:</b>几乎所有的主流浏览器都不支持 text-decoration-color 属性。</p>
<p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-color 属性。</p>
</body>
</html>
浏览器支持
几乎所有的主流浏览器都不支持 text-decoration-color 属性。
Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-color 属性。
定义和用法
text-decoration-color 属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through)的颜色。
注意:只有在带有可见的 text-decoration 的元素上,text-decoration-color 属性才起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
text-decoration: underline;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
-moz-text-decoration-color: red;
}
}
</style>
</head>
<body>
<p>逐渐地把下划线的颜色从黑色变为红色,再从红色变回黑色:
<p>
<div id="myDIV">
<p>这是一个段落。</p>
</div>
<p>在 CSS 中,text-decoration-color 属性是 <em>可动画化(animatable)</em> 的。</p>
<p><b>注意:</b>几乎所有的主流浏览器都不支持 text-decoration-color 属性。</p>
<p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-color 属性。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-,支持 CSS 动画。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p#myP {
text-decoration: underline;
}
</style>
</head>
<body>
<p id="myP">
Hello world!
</p>
<p>点击“尝试一下”按钮,改变下划线的颜色。</p>
<button onclick="myFunction()">尝试一下</button>
<script>
function myFunction() {
document.getElementById("myP").style.textDecorationColor = "red";
document.getElementById("myP").style.MozTextDecorationColor = "red"; // 针对 Firefox 的代码
}
</script>
<p><b>注意:</b>几乎所有的主流浏览器都不支持 textDecorationColor 属性。</p>
<p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 MozTextDecorationColor 属性。</p>
</body>
</html>
默认值: | currentColor |
---|---|
继承: | 否 |
可动画化: | 是。请参阅 可动画化(animatable)。 - 尝试一下 - |
版本: | CSS3 |
JavaScript 语法: | object.style.textDecorationColor="red" - 尝试一下 - |
CSS 语法
text-decoration-color: color|initial|inherit;
属性值
值 | 描述 | 测试 |
---|---|---|
color | 规定文本修饰的颜色。 | 测试 » |
initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 » |
inherit | 从父元素继承该属性。请参阅 inherit。 |