text-decoration 文本装饰属性
最后更新：2026-09-13
text-decoration text-decoration 文本装饰属性
text-decoration 属性用于给文本添加装饰线，常见用途包括添加下划线、删除线和上划线。它是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 四个子属性的简写形式。默认情况下，链接（a 标签）会自带下划线，通常会在重置样式中去掉。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness> | 值 | 文本装饰简写（下划线/删除线等） |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-decoration | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 使用 text-decoration: none; 可以去除链接默认的下划线，但建议保留某种视觉提示以保证可访问性。
重要： text-decoration 在 CSS3 中默认不再继承，但子元素的装饰线仍会"穿过"显示。如需单独控制，可使用 text-decoration 的子属性。
❓ 常见问题
Qtext-decoration 和 border-bottom 实现的下划线有什么区别？
Atext-decoration 的文本装饰线紧贴文字，位置和粗细由浏览器控制；border-bottom 是元素底部的边框，位置在整行底部，可精确控制样式、颜色和距离，但会随宽度延伸。
Q如何单独修改下划线的颜色或样式？
A可以使用 text-decoration-color、text-decoration-style（solid/dashed/dotted/wavy）和 text-decoration-thickness 三个子属性分别控制下划线的颜色、线型和粗细。
Q如何去掉链接的下划线？
A给链接写 text-decoration: none 即可。但去掉下划线后建议保留其他视觉区分（颜色变化、hover 效果），否则用户难以辨认，可访问性会变差。
🏷️ 相关属性
💡 相关案例
📚 相关教程
