CSS - text-decoration 属性

css text-decoration 属性用于向内联内容添加“修饰”，例如在一段文本上添加下划线、上划线、直通和删除线。

它是以下属性的简写属性：

text-decoration-line：设置装饰线的类型（下划线、删除线或上划线）。
text-decoration-color：设置文本装饰的颜色。
text-decoration-style：设置文本装饰的样式（虚线、虚线、实心、波浪形、双倍等）
text-decoration-thickness：设置文本修饰的厚度。

text-decoration-line

属性 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。

可能的值

keyword：作为关键字的颜色名称。示例 = 红色。
hexadecimal：十六进制值。示例 = #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。

可能的值

length：任何长度值（以 px、pt、in、cm 等为单位）
auto：浏览器选择适当的宽度。
percentage：将当前字体中的粗细指定为 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：浏览器选择适当的偏移量。
length：任何长度值（以 px、pt、in、cm 等为单位）。
percentage：将偏移量指定为当前字体中 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>

打印本页