整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
改变下划线文本中下划线的颜色：
p
{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* 针对 Firefox 的代码 */
}
浏览器支持
几乎所有的主流浏览器都不支持 text-decoration-color 属性。
Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。
定义和用法
text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。
注意：只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。
| 默认值： | currentColor |
|---|---|
| 继承： | 否 |
| 可动画化： | 是。请参阅 可动画化（animatable）。尝试一下 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.textDecorationColor="red"尝试一下 |
CSS 语法
text-decoration-color: color|initial|inherit;
属性值
| 值 | 描述 | 测试 |
|---|---|---|
| color | 规定文本修饰的颜色。 | 测试 ? |
| initial | 设置该属性为它的默认值。请参阅 initial。 | 测试 ? |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
过CSS文本装饰可以为文本添加装饰线、为装饰线设置颜色、为装饰线指定风格、为装饰线设置厚度等效果。
为文本添加装饰线通过 text-decoration-line 属性实现，可以结合一个以上的值，如上划线和下划线，来显示文本上方和下方的线条。具体的值有三个：
overline，在文本上方添加线条修饰。
line-through，在文本中间添加线条修饰，实现了删除线的效果。
underline，在文本下方添加线条修饰，实现了下划线的效果。
我们来做个例子。
打开编辑器，在 005 文件夹下创建 decoration.html 文件，构建好基本代码。
添加 h1，h2，h3，p 四个元素。分别填入一些文本。
在 005 文件夹下再创建一个 mystyle-3.css 文件，
定义 h1 选择器，声明样式属性 text-decoration-line，值为 overline。
定义 h2 选择器，也声明样式属性 text-decoration-line，值为 line-through。
定义 h3 选择器，再声明样式属性 text-decoration-line，值为 underline。
回到页面，通过 link 元素引入 mystyle-3.css 这个外部样式。
在浏览器上预览效果，我们看：上边线、删除线和下划线就做好了！
实际上，可以同时给文本添加多个线条，实现方法是给 text-decoration-line
[?dek??re??n】属性设置多个值，每个值通过空格分开。
在 mystyle-3.css 再定义一个 p 选择器，声明样式属性 text-decoration-line，值写为 overline underline （读作overline 空格 underline ）。
看一下效果，段落被添加了两条装饰线。
有的小伙伴还记得，给文本添加链接后，浏览器会默认给这个文本添加一个下划线。所以，添加了链接的文本就不要使用 underline 下划线装饰了。
为文本设置装饰线的颜色通过 text-decoration-color 属性实现，属性值为任意合法的颜色值。
给 h1 元素设置 text-decoration-color 属性，颜色值设置为 red。再快速的给 h2，h3，p 元素设置 text-decoration-color 属性，值分别为 blue，green，purple。
我们看，线条都有了颜色。
为装饰线指定风格通过 text-decoration-style 属性实现，属性值有五个：
solid，实线。
double，双实线。
dotted，圆点线。
dashed[d??t]，虚线。
wavy[?we?vi]，波浪线。
为了演示方便，在 html 中再添加一个标题 h4，填入一些文本，在 css 中将全部元素的 text-decoration-line 样式属性都设置为 underline。再定义一个 h4 选择器，声明样式 text-decoration-line: underline。
给 h1， h2，h3，h4，p 全部添加 text-decoration-style 属性，值分别为 solid，double，dotted，dashed[d??t]，wavy。
这样，各种线条的风格就设置好了！
通过 text-decoration-thickness 属性为线条设置厚度，也就是线条的粗细。属性值有三种设置方法：
auto， 默认值，这个值是不确定的，和所修饰的文字大小有关系。
px，像素大小，是一个绝对值。比如 5px。
%，是一个相对值，根据修饰文字的高度计算出来。比如 25%。
在 h1 元素上声明样式属性 text-decoration-thickness，值为 auto。在 h2，h3 上也声明这个样式属性，值分别为 5px，50%。
在浏览器里仔细观察，h1 上的下划线厚度是浏览器给的默认值。h2 上的下划线厚度是 5px。h3 上的下划线厚度为文字高度的一半。
回到样式表代码，我们分析一下：每个文本修饰的属性名，均为三个单词连接起来的，这样写起来比较啰嗦，能不能简化一下呢？可以的！
h1 {
/* text-decoration-line: overline; */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
ext-decoration属性介绍#
text-decoration属性值说明表#
值作用none去掉文本修饰线underline设置下划线overline设置上划线line-through设置删除线
HTML标签自带修饰线#
u标签#
Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>设置文本修饰线</title> </head> <body> <u>成功不是击败别人，而是改变自己</u> </body> </html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
