上查看所有课程
CSS text-decoration 属性用于使用各种线条来装饰文本的外观。例如，
span {
text-decoration: underline;
}浏览器输出
在这里，text-decoration: underline 给 span 元素内的文本加了下划线。
CSS 文本装饰语法
text-decoration 属性的语法如下：
text-decoration: value | initial | inherit;text-decoration 常用的值有 underline、overline、line-through、inherit 和 none。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration</title>
</head>
<body>
<h1>Text Decoration</h1>
<p class="underline">text-decoration: underline;</p>
<p class="line-through">text-decoration: line-through;</p>
<p class="overline">text-decoration: overline;</p>
</body>
</html>p.underline {
/* draws a 1px line below the text at the baseline */
text-decoration: underline;
}
p.line-through {
/* draws a 1px line across the text in the middle */
text-decoration: line-through;
}
p.overline {
/* draws a 1px line above the text at the top */
text-decoration: overline;
}浏览器输出
作为简写属性的文本装饰
我们也可以将 text-decoration 作为简写属性来设置文本线条的颜色、样式和粗细。text-decoration 的原始语法是：
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;这里，
text-decoration-line: 设置文本的线条装饰类型text-decoration-color: 设置线条装饰的颜色text-decoration-style: 设置由text-decoration-line指定的线条样式text-decoration-thickness: 设置装饰中使用的线条粗细
我们来看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration</title>
</head>
<body>
<h1>Shorthand Text Decoration</h1>
<p>
We can <span>decorate</span> our text using CSS text-decoration
property.
</p>
</body>
</html>/* shorthand property to set text-decoration*/
p span {
text-decoration: underline wavy red 2px;
}
/* This above code is equivalent to
p span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
}
*/浏览器输出
注意：text-decoration-line 的值是必需的，而其他值是可选的。
与 text-decoration 相关的不同属性
CSS text-decoration-line 属性
我们来看一个 text-decoration-line 属性的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-line</title>
</head>
<body>
<p>text-decoration-line: underline;</p>
</body>
</html>p {
/* underlines the text */
text-decoration-line: underline;
}浏览器输出
text-decoration-line 可能的值是 underline、overline 或 line-through。
CSS text-decoration-style 属性
我们来看一个 text-decoration-style 属性的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-style</title>
</head>
<body>
<p>text-decoration-style: dashed;</p>
</body>
</html>p {
text-decoration-line: underline;
/* sets the line as dashed */
text-decoration-style: dashed;
}浏览器输出
text-decoration-style 可能的值是 solid、dashed、dotted、double 和 wavy。
CSS text-decoration-color 属性
我们来看一个 text-decoration-color 属性的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-color</title>
</head>
<body>
<p>text-decoration-color: red;</p>
</body>
</html>p {
text-decoration-line: underline;
text-decoration-style: dashed;
/* sets the color of line to red */
text-decoration-color: red;
}浏览器输出
text-decoration-color 的值可以以任何颜色格式指定，如颜色名称、RGB、HSL 等。
CSS text-decoration-thickness 属性
我们来看一个 text-decoration-thickness 属性的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-thickness</title>
</head>
<body>
<p>text-decoration-thickness: 4px;</p>
</body>
</html>p {
text-decoration-line: underline;
/* sets the thickness of line to 4px */
text-decoration-thickness: 4px;
}浏览器输出
