文本装饰风格 | text-decoration-style (Text Decoration) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    文本装饰风格 | text-decoration-style (Text Decoration) - CSS 中文开发手册

    该text-decoration-style CSS属性设置由text-decoration-line指定的线的样式。该样式适用于所有指定的线条,但没有办法为text-decoration-line定义的每个线条设定不同的样式。当要一次设置多个线条装饰属性时,使用text-decoration简写属性可能会更方便。

    /* Keyword values */
    text-decoration-style: solid;
    text-decoration-style: double;
    text-decoration-style: dotted;
    text-decoration-style: dashed;
    text-decoration-style: wavy;
    
    /* Global values */
    text-decoration-style: inherit;
    text-decoration-style: initial;
    text-decoration-style: unset;

    如果指定的修饰具有特定的语义含义,如直通线意味着某些文本已被删除,那么鼓励作者使用HTML标记(如,<del>或<s>)来表示该含义。由于浏览器在某些情况下可能会禁用样式,所以在这种情况下,采用HTML标记可以使得该语义并不会消失。

    Initial value

    solid

    Applies to

    all elements. It also applies to ::first-letter and ::first-line.

    Inherited

    no

    Media

    visual

    Computed value

    as specified

    Animation type

    discrete

    Canonical order

    the unique non-ambiguous order defined by the formal grammar

    语法

    可能值

    solid——绘制单行实线

    double——绘制双行实线

    dotted——绘制一条虚线(点状)

    dashed——绘制一条虚线(短线状)

    wavy——绘制一条波浪线

    -moz-none——不绘制线,非标准接口,使用text-decoration-line: none作为代替。

    形式语法

    solid | double | dotted | dashed | wavy

    实例

    .example {    
           -moz-text-decoration-line: underline;
           -moz-text-decoration-style: wavy;
           -moz-text-decoration-color: red;    
        -webkit-text-decoration-line: underline;
        -webkit-text-decoration-style: wavy;
        -webkit-text-decoration-color: red;
    }
    .wavy { 
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: red;
    }
    <p class="wavy">This text has a wavy red line beneath it.</p>
    转载请保留页面地址:https://www.breakyizhan.com/css/32021.html

    posted on 2020-06-30 21:58  MrAit  阅读(516)  评论(0编辑  收藏  举报

    导航