CSS text-decoration 属性（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：CSS text-decoration 属性的实用价值

在网页设计中，文本的装饰效果直接影响用户体验和视觉美感。CSS text-decoration 属性 是实现文本修饰的核心工具之一，它能够快速添加下划线、删除线、波浪线等效果，甚至控制装饰线的样式和颜色。无论是标注链接、突出标题，还是设计促销活动中的划线价格，这一属性都能提供简洁高效的解决方案。

对于编程初学者而言，掌握 text-decoration 属性不仅能提升基础 CSS 能力，还能为后续学习更复杂的样式设计打下基础。而对于中级开发者，深入理解其子属性和兼容性细节，则有助于在复杂项目中灵活应用。本文将通过循序渐进的讲解、形象的比喻和实际案例，帮助读者全面掌握这一属性的使用方法。

一、基础概念：text-decoration 属性的组成

1.1 什么是 text-decoration？

text-decoration 属性是 CSS 中用于统一控制文本装饰效果的简写属性。它能同时设置三个子属性：text-decoration-line（装饰线类型）、text-decoration-style（装饰线样式）和 text-decoration-color（装饰线颜色）。

形象比喻：
可以把 text-decoration 想象成一支多功能画笔，通过调整笔尖（装饰线类型）、笔触（样式）和墨水颜色，快速为文本添加视觉效果。

1.2 独立子属性的优势

尽管 text-decoration 可以一次设置多个属性，但现代 CSS 更推荐独立使用子属性，因为这样能更精准地控制细节。例如：

/* 简写属性示例 */  
a {  
  text-decoration: underline wavy red;  
}  

/* 推荐的独立写法 */  
a {  
  text-decoration-line: underline;  
  text-decoration-style: wavy;  
  text-decoration-color: red;  
}  

这种写法不仅代码更清晰，还能避免因简写属性覆盖其他默认值而引发的意外效果。

二、核心子属性详解

2.1 text-decoration-line：定义装饰线类型

该子属性控制装饰线的显示类型，支持以下值：

案例 1：电商促销中的删除线效果
在展示商品原价时，常用删除线表示折扣前的价格：

.original-price {  
  text-decoration-line: line-through;  
  color: #999;  
}  

配合灰色字体，能直观传达“原价已失效”的信息。

2.2 text-decoration-style：装饰线的样式

该属性定义装饰线的笔触形态，默认值为 solid。支持的值包括：

案例 2：波浪线强调标题
在需要突出强调的标题中，波浪线能比普通下划线更具视觉冲击力：

h2.emphasized {  
  text-decoration-line: underline;  
  text-decoration-style: wavy;  
  text-decoration-color: #ff6b6b;  
}  

此时标题下方会显示一条红色波浪线，吸引用户注意力。

2.3 text-decoration-color：装饰线的颜色

该属性设置装饰线的颜色，支持所有 CSS 颜色格式（如十六进制、RGB、颜色名称等）。

案例 3：动态链接下划线
通过改变下划线颜色，可以区分不同状态的链接：

a {  
  text-decoration-line: underline;  
  text-decoration-color: blue;  
}  

a:hover {  
  text-decoration-color: red;  
}  

当鼠标悬停时，链接的下划线会从蓝色变为红色，增强交互反馈。

三、进阶技巧与常见场景

3.1 组合装饰线：创造独特效果

通过组合 text-decoration-line 的多个值，可以设计出复杂的效果。例如：

.special-text {  
  text-decoration-line: underline overline line-through;  
  text-decoration-style: dashed;  
  text-decoration-color: #333;  
}  

这段代码会让文本同时显示上下划线和删除线，且所有线均为灰色短虚线，适合用于需要突出强调的警示信息。

3.2 兼容性与历史版本

在旧版浏览器（如 IE11）中，text-decoration 的简写属性可能无法正确解析所有子属性。此时，建议：

1. 使用独立子属性声明；
2. 对于删除线等基础效果，可使用 text-decoration: line-through; 简写；
3. 避免依赖 text-decoration-style 和 text-decoration-color 的高级值（如 wavy）。

3.3 结合伪元素扩展功能

通过 CSS 伪元素 ::before 或 ::after，可以实现更灵活的装饰效果。例如：

.button {  
  padding: 10px 20px;  
  background: #4CAF50;  
  color: white;  
}  

.button::after {  
  content: " ";  
  display: inline-block;  
  width: 100%;  
  border-bottom: 2px solid white;  
  margin-top: 5px;  
}  

这段代码通过伪元素在按钮下方添加一条白色下划线，效果类似 text-decoration: underline，但能更好地控制线的位置和样式。

四、最佳实践与常见问题

4.1 如何避免装饰线影响布局？

装饰线默认会占用元素的垂直高度，可能导致布局错位。可通过 box-sizing 或调整元素外边距来解决：

.decorated-text {  
  text-decoration: underline;  
  margin-bottom: 5px;  /* 预留装饰线的垂直空间 */  
}  

4.2 文字与装饰线对齐问题

若装饰线与文本基线不对齐，可能是字体或行高的问题。尝试调整 line-height 或使用 vertical-align：

.text-with-line {  
  line-height: 1.5;  
  text-decoration: underline;  
  vertical-align: bottom;  
}  

4.3 响应式设计中的注意事项

在移动端，过粗的装饰线可能影响可读性。建议根据屏幕尺寸调整颜色透明度或线宽：

@media (max-width: 768px) {  
  a {  
    text-decoration-color: rgba(0, 0, 255, 0.5);  
    text-decoration-style: dotted;  
  }  
}  

结论：掌握文本装饰的美学与功能

通过本文的讲解，读者可以发现，CSS text-decoration 属性不仅是基础样式工具，更是提升设计细节的重要手段。无论是电商页面的促销标记、文档中的重点内容标注，还是按钮的交互反馈，合理使用这一属性都能显著改善用户体验。

建议读者在实际项目中多尝试组合不同子属性，探索装饰线与字体、颜色、布局的协同效果。同时，关注浏览器兼容性文档，确保代码在不同设备上稳定运行。掌握 text-decoration 的精髓，让文本的“装饰”真正服务于内容的表达与用户的感知。