CSS - 文本装饰

text-decoration 属性用于向内联内容添加“装饰”，例如文本下划线、上划线、删除线和中划线。

它是一个简写属性，对应以下属性：

text-decoration-line：设置装饰线的类型（下划线、删除线或上划线）。
text-decoration-color：设置文本装饰的颜色。
text-decoration-style：设置文本装饰的样式（点状、虚线、实线、波浪线、双线等）。
text-decoration-thickness：设置文本装饰的粗细。

文本装饰线

text-decoration-line 属性用于向文本添加装饰线，例如下划线。

可能的值

none − 不应向内联文本添加任何装饰。
underline − 在内联文本下方绘制下划线。
overline − 在内联文本上方绘制上划线。
line-through − 应在内联文本中间绘制一条线。
blink − 内联文本应闪烁，类似于 Netscape 引入的 BLINK 元素。

应用于

所有 HTML 元素。

DOM 语法

object.style.textDecorationLine = "underline";

CSS text-decoration - 使用 text-decoration-line 属性

<html>
<head>
</head>
<body>
   <h2>Text Decoration Line</h2>
      <p style="text-decoration-line: overline;">Overline text decoration.</p>
      <p style="text-decoration-line: line-through;">Line-through text decoration.</p>
      <p style="text-decoration-line: underline;">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-color 属性

text-decoration-color 属性用于向文本装饰线添加颜色。要使用此属性，需要指定 text-decoration-line。

可能的值

关键字：作为关键字的颜色名称。例如 = red。
十六进制：十六进制值。例如 = #00ffff。
rgb rgb 值。例如 = rgb(255,200,100)。

应用于

所有 HTML 元素。

DOM 语法

object.style.textDecorationColor = "#00ffff";

示例

让我们来看一个例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Color</h2>
      <p style="text-decoration-line: overline; text-decoration-color: red">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-color: green">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-color: blue">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-style 属性

text-decoration-style 属性用于向文本装饰线添加样式。要使用此属性，需要指定 text-decoration-line。

可能的值

solid
dotted
dashed
double
ridge
inset
outset

应用于

所有 HTML 元素。

DOM 语法

object.style.textDecorationStyle = "dotted";

示例

让我们来看一个例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Style</h2>
      <p style="text-decoration-line: overline; text-decoration-style: dashed">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-style: solid">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-style: dotted">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-thickness 属性

text-decoration-thickness 属性用于向文本装饰线添加粗细。要使用此属性，需要指定 text-decoration-line。

可能的值

长度：任何长度值（以 px、pt、in、cm 等表示）。
auto：浏览器选择合适的宽度。
百分比：将粗细指定为当前字体中 1em 的百分比。

应用于

所有 HTML 元素。

DOM 语法

object.style.textDecorationThickness = "5px";

示例

让我们来看一个例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Thickness</h2>
      <p style="text-decoration-line: overline; text-decoration-thickness: 2px">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-thickness: 1pt">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-thickness: 0.25in">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-offset 属性

text-underline-offset 属性用于设置文本装饰线与其原始位置的偏移距离。

text-underline-offset 属性不是简写 text-decoration 的一部分。此属性仅影响下划线，而不影响 text-decoration-line 的其他值，例如删除线或上划线。

可能的值

auto：浏览器选择合适的偏移量。
长度：任何长度值（以 px、pt、in、cm 等表示）。
百分比：将偏移量指定为当前字体中 1em 的百分比。

应用于

所有 HTML 元素。

DOM 语法

object.style.textUnderlineOffset = "2pt";

示例

让我们来看一个例子

<html>
<head>
<style>
   p {
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>Text Underline Offset</h2>
      <p style="text-decoration-line: underline; text-decoration-style: wavy; text-underline-offset: 1em;">Offset for underline.</p>
      <p style="text-decoration-line: overline; text-decoration-style: dotted; text-underline-offset: 1in;">No offset for overline.</p>   
</body>
</html>

CSS text-decoration - 使用 text-underline-position 属性

text-underline-position 属性用于设置文本装饰线（仅限下划线）与其原始位置的位置。

text-underline-offset 属性不是简写 text-decoration 的一部分。此属性仅影响下划线，而不影响 text-decoration-line 的其他值，例如删除线或上划线。

可能的值

auto：浏览器选择合适的位置，位于或低于文本基线。
under：将线条放在基线下方。
left：将线条放在左侧（对于垂直书写模式）；以及下方（对于水平书写模式）。
right：将线条放在右侧（对于垂直书写模式）；以及下方（对于水平书写模式）。
under left：将线条放在基线左侧下方。
right under：将线条放在基线右侧下方。

应用于

所有 HTML 元素。

DOM 语法

object.style.textUnderlinePosition = "under";

示例

让我们来看一个例子

<html>
<head>
</head>
<body>
   <h2>Text Underline Position</h2>
      <p style="text-decoration-line: underline; text-underline-position: under;">Position of line under the baseline.</p>
</body>
</html>

打印页面