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

    text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线或闪烁)它是text-decoration-line,text-decoration-color,text-decoration-style,和新出现的text-decoration-thickness属性的缩写。
    文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性,子元素则不能将其删除。例如,在如下标记中<p>This text has <em>some emphasized words</em> in it.</p>,应用样式p{text-decoration: underline}会对整个段落添加下划线,此时再添加样式 em{text-decoration: none}则不会引起任何改变,整个段落仍然有下划线修饰。然而,新加样式 em{text-decoration: overline}则会在<em>标记的文字上再添加上这种overline样式。

    示例

    text-decoration: underline;
    text-decoration: underline dotted;
    text-decoration: underline dotted red;
    text-decoration: green wavy underline;
    text-decoration: underline overline #FF3028;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持text-decoration

    语法:

    text-decoration:text-decoration-line||text-decoration-style||text-decoration-color||text-decoration-thickness

    取值:

    • text-decoration-line:指定文本装饰的种类。相当于CSS2.1的text-decoration属性,可取值:none | underline | overline | line-through | blink
    • text-decoration-style:指定文本装饰的样式。如波浪线wavy、实线solid、虚线dashed
    • text-decoration-color:指定文本装饰的颜色。
    • text-decoration-thickness:文本修饰线的粗细(CSS4新增加注意这个属性还不是正式的,还没有明确。)

    说明:

    复合属性。检索或设置对象中的文本的装饰。

    默认值

    作为速记的每个属性:

    • text-decoration-color: currentcolor
    • text-decoration-style: solid
    • text-decoration-line: none
    适用于所有元素。它也适用于::first-letter和::first-line。
    继承性
    动画性

    作为速记的每个属性:

    • text-decoration-color:颜色
    • text-decoration-style:离散
    • text-decoration-line:离散
    • text-decoration-thickness:按计算值类型
    计算值

    作为速记的每个属性:

    • text-decoration-line:作为指定
    • text-decoration-style:作为指定
    • text-decoration-color:计算的颜色
    • text-decoration-thickness:作为指定

    例子

    h1{text-decoration:overline}
    h2{text-decoration:line-through}
    h3{text-decoration:underline}
    
    <p class="under">this text has a line underneath it.</p>
    <p class="over">this text has a line over it.</p>
    <p class="line">this text has a line going through it.</p>
    <p>this <a class="plain" href="#">link will not be underlined</a>,
        as links generally are by default. be careful when removing
        the text decoration on anchors since users often depend on
        the underline to denote hyperlinks.</p>
    <p class="underover">this text has lines above <em>and</em> below it.</p>
    <p class="blink">this text might blink for you,
        depending on the browser you use.</p>
    
    .under {
      text-decoration: underline red;
    }
    
    .over {
      text-decoration: wavy overline lime;
    }
    
    .line {
      text-decoration: line-through;
    }
    
    .plain {
      text-decoration: none;
    }
    
    .underover {
      text-decoration: dashed underline overline;
    }
    
    .blink {
      text-decoration: blink;
    }