文本装饰风格 | 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)  编辑  收藏  举报

    导航