CSS text-decoration-color 属性

CSS 参考手册 CSS 参考手册


改变下划线文本中下划线的颜色：

<!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>

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

几乎所有的主流浏览器都不支持 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。


CSS 参考手册 CSS 参考手册