CSS text-decoration 属性-之路教程

←CSS text-decoration-style 属性

CSS text-fill-color 属性→

CSS text-decoration 属性

text-decoration 属性用于设置文本的装饰。

在 CSS3 中，它是以下属性的简写：

text-decoration-line
text-decoration-color
text-decoration-style

如果这些属性之一的值不存在，则将自动设置默认值。
text-decoration-line 是必需的。

在 CSS1 规范中， text-decoration 不是速记，而是具有以下值：

none
underline
overline
line-through
blink

初始值	none currentColor solid
应用于	所有元素。它还适用于伪元素::first-letter 和 ::first-line。
继承	无效
可动画的	无效
版本	CSS1，CSS3
DOM 语法	object.Style.TextDecoration = "dashed";

语法

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

text-decoration 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .a {
        text-decoration: overline;
      }
      .b {
        text-decoration: line-through;
      }
      .c {
        text-decoration: underline;
      }
      .d {
        text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration 属性示例</h2>
    <p class="a">生活终归还得继续。...</p>
    <p class="b">生活终归还得继续。...</p>
    <p class="c">生活终归还得继续。...</p>
    <p class="d">生活终归还得继续。...</p>
  </body>
</html>

具有指定颜色的 text-decoration 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-decoration-color: #1c87c9;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration 属性示例</h2>
    <p>生活终归还得继续。...</p>
  </body>
</html>

在给定的示例中，-webkit- 扩展用于 Safari。

具有指定样式的 text-decoration 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        text-decoration-line: underline;
      }
      div.t1 {
        text-decoration-style: dotted;
      }
      div.t2 {
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-style: solid;
      }
      div.t4 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration 属性示例</h2>
    <div class="t1">生活终归还得继续。...</div>
    <br>
    <div class="t2">生活终归还得继续。...</div>
    <br>
    <div class="t3">生活终归还得继续。...</div>
    <br>
    <div class="t4">生活终归还得继续。...</div>
  </body>
</html>

CSS text-decoration 属性值说明

值	描述
text-decoration-line	指定文本装饰的那种。
text-decoration-color	指定文本装饰的颜色。
text-decoration-style	指定文本装饰的样式。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:48 来源：oir作者：oir