HTML中text-decoration属性的用法详解
在网页样式开发中，文本装饰效果是提升页面可读性和视觉表现的重要手段。CSS提供的text-decoration属性，专门用于设置文本的装饰线样式，我们可以结合HTML结构和CSS规则灵活使用这个属性。
text-decoration属性基本说明
text-decoration是一个简写属性，用于控制文本的装饰线相关样式，它可以同时设置以下三个子属性的值：
text-decoration-line：定义装饰线的类型，比如下划线、上划线、删除线等text-decoration-color：定义装饰线的颜色text-decoration-style：定义装饰线的样式，比如实线、虚线、波浪线等
该属性的默认值通常为none，表示元素没有文本装饰线。需要注意的是，text-decoration属性不会被元素的子元素继承，这是它和其他部分CSS属性的不同之处。
text-decoration属性常用取值
我们可以通过简写形式或者单独设置子属性的方式使用这个属性，以下是常见的取值说明：
| 取值 | 说明 |
|---|---|
| none | 无文本装饰，默认值 |
| underline | 文本下方添加下划线 |
| overline | 文本上方添加上划线 |
| line-through | 文本中间添加删除线 |
| blink | 文本闪烁效果（部分浏览器已不支持，不建议使用） |
| solid | 装饰线为实线（text-decoration-style的子值） |
| dashed | 装饰线为虚线（text-decoration-style的子值） |
| wavy | 装饰线为波浪线（text-decoration-style的子值） |
基础使用示例
以下是通过CSS设置不同文本装饰效果的基础示例，代码中所有HTML特殊字符都已做转义处理：
/* 为所有p标签添加下划线，下划线为红色实线 */
p {
text-decoration: underline solid red;
}
/* 为类名为delete-text的元素添加删除线，删除线为灰色虚线 */
.delete-text {
text-decoration: line-through dashed #666;
}
/* 为类名为title的元素添加上划线，上划线为蓝色波浪线 */
.title {
text-decoration: overline wavy blue;
}
/* 取消a标签默认的下划线 */
a {
text-decoration: none;
}
/* 鼠标悬浮在a标签上时显示下划线 */
a:hover {
text-decoration: underline;
}对应的HTML结构示例如下：
<p>这是一段带红色下划线的文本</p> <span class="delete-text">这是一段带灰色删除线的文本</span> <h2 class="title">这是带蓝色上划线的标题</h2> <a href="https://www.ipipp.com">访问示例网站（默认无下划线，悬浮显示）</a>
注意事项
在使用text-decoration属性时，需要注意以下几点：
如果只需要设置装饰线的类型，可以直接写
text-decoration: underline，此时装饰线颜色会默认跟随文本颜色，样式默认为实线部分旧版本浏览器可能不支持
text-decoration-style的波浪线等取值，实际开发前建议确认目标浏览器的兼容性不要混淆
text-decoration和border-bottom，前者是文本装饰属性，后者是边框属性，下划线的位置和表现会有细微差异如果需要为装饰线设置透明度，可以使用rgba颜色值，例如
text-decoration-color: rgba(255,0,0,0.5)
实际场景应用
在实际开发中，text-decoration最常见的用途是处理链接的下划线：默认情况下浏览器会给<a>标签添加下划线，我们通常会在重置样式时先取消这个默认下划线，再根据交互需求在hover等状态下添加，提升用户体验。
另外，删除线常用于展示商品原价、已失效的内容，上划线使用场景相对较少，一般用于特殊排版需求。波浪线的下划线则可以用于突出重要提示文本，比普通实线下划线更有视觉区分度。