• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • text-decoration-color

    版本:CSS3

    CSS 属性 text-decoration-color 用于设置文本修饰线的颜色,文本修饰线是通过 text-decoration-line 属性指定的。修饰线包括下划线、上划线、删除线和波浪线,波浪线的典型用途是标明内容拼写错误(仅举例)。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。CSS 没有直接的机制为每种线型指定唯一的颜色,不过可以通过嵌套元素的方法来实现这种效果:用 text-decoration-line 属性为每个元素应用一种线型,再用 text-decoration-color 指定线的颜色。

    示例

    /* <color> values */
    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;
    
    /* global values */
    text-decoration-color: inherit;
    text-decoration-color: initial;
    text-decoration-color: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE浏览器不支持text-decoration-color,其余浏览器都支持text-decoration-color

    语法:

    text-decoration-color:<color>

    取值:

    <color>:指定颜色。取值:rgb()| rgba()| hsl()| hsla()| hex-color| named-color| currentcolor| deprecated-system-color

    说明:

    检索或设置对象中的文本装饰线条的颜色。

    • 对应的脚本特性为textDecorationColor

    CSS属性text-decoration-color用于设置文本修饰线的颜色。文本修饰线是通过text-decoration-line属性指定的,修饰线包括下划线、上划线、删除线和波浪线,波浪线的典型用途是标明内容拼写错误(仅举例)。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

    当要设置多个线修饰属性时,用text-decoration简写属性会比分别写多个属性更方便。

    默认值当前文本颜色
    适用于所有元素
    继承性
    动画性
    计算值指定值

    例子

    p{
     text-decoration:underline;
     text-decoration-color:red;
     -moz-text-decoration-color:red; /*针对firefox的代码*/
    }
    
    <p>this paragraph has <s>some erroneous text</s> inside it that i want to call attention to.</p>
    
    p { 
      text-decoration-line: underline;
      text-decoration-color: cyan;
    }
    
    s {
      text-decoration-line: line-through;
      text-decoration-color: red;
      text-decoration-style: wavy;
    }