• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • text-decoration-line

    版本:CSS3

    CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时,用 text-decoration 简写属性会比分别写多个属性更方便。

    示例

    /* Keyword values */
    text-decoration-line: none;
    text-decoration-line: underline;
    text-decoration-line: overline;
    text-decoration-line: line-through;
    text-decoration-line: blink;
    text-decoration-line: underline overline;               /* Two decoration lines */
    text-decoration-line: overline underline line-through;  /* Multiple decoration lines */
    
    /* Global values */
    text-decoration-line: inherit;
    text-decoration-line: initial;
    text-decoration-line: unset;
    

    浏览器支持

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

    语法:

    text-decoration-line:none |[underline || overline || line-through || blink]

    取值:

    text-decoration-line属性可以设置为none,或者一个及多个用空格分隔的下列值。

    • none表示没有文本修饰效果。指定文字无装饰
    • underline在文本的下方有一条修饰线。指定文字的装饰是下划线
    • overline在文本的上方有一条修饰线。指定文字的装饰是上划线
    • line-through有一条贯穿文本中间的修饰线。指定文字的装饰是贯穿线
    • blink文本闪烁(文本交替处于显示与隐藏状态)。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用CSS 动画,该值也不宜使用

    说明:

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

    • 相当于CSS2.1的<text-decoration>属性
    • 需要注意的是大部分浏览器都不支持blink值,因为规范允许用户代理忽略该效果;
    • 对应的脚本特性为textDecorationLine
    默认值none
    适用于所有元素
    继承性
    适用媒体visual
    动画性
    计算值指定值

    例子

    p{
    	text-decoration-line:overline;
    	-moz-text-decoration-line:overline;/*针对firefox的代码*/
    }
    
    <p class="wavy">here's some text with wavy red underline!</p>
    <p class="both">this text has lines both above and below it.</p>
    
    .wavy { 
    	text-decoration-line: underline;
    	text-decoration-style: wavy;
    	text-decoration-color: red;
    }
    
    .both {
    	text-decoration-line: underline overline;
    }