text-decoration 文本修饰

基本语法

text-decoration: line style color;

复合属性

text-decoration 是复合属性,包含三个子属性:

text-decoration-line: 修饰线类型
text-decoration-style: 修饰线样式
text-decoration-thickness: 修饰线粗细

text-decoration-line(修饰线类型)

值	说明
`none`	无修饰线(默认)
`underline`	下划线
`overline`	上划线
`line-through`	删除线/贯穿线

.text-underline {
  text-decoration-line: underline;
}

.text-overline {
  text-decoration-line: overline;
}

.text-through {
  text-decoration-line: line-through;
}

.text-none {
  text-decoration-line: none;
}

text-decoration-style(修饰线样式)

值	说明
`solid`	实线(默认)
`dashed`	虚线
`dotted`	点线
`double`	双线
`wavy`	波浪线

.text-dashed {
  text-decoration-style: dashed;
}

.text-dotted {
  text-decoration-style: dotted;
}

.text-wavy {
  text-decoration-style: wavy;
}

text-decoration-thickness(修饰线粗细)

.text-thick {
  text-decoration-thickness: 5px;
}

.text-thin {
  text-decoration-thickness: 1px;
}

简写示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>text-decoration 文本修饰</title>
  <style>
    .box {
      text-decoration-line: underline;
    }
    .linestyle {
      /* 线样式,如波浪线 wavy 实线 solid 虚线 dashed */
      text-decoration-style: wavy;
    }
    .linethick {
      /* 线粗细 */
      text-decoration-thickness: 5px;
    }
  </style>
</head>
<body>
  <div class="box">下划线文字</div>
  <div class="box linestyle">波浪线下划线</div>
  <div class="box linethick">粗下划线</div>
</body>
</html>

复合写法

/* 完整写法 */
.text-style {
  text-decoration: underline wavy red;
}

/* 部分省略 */
.text-simple {
  text-decoration: underline;
}

去掉链接默认下划线

a {
  text-decoration: none;
}

实际应用

场景1: 链接样式

/* 默认去掉下划线 */
a {
  text-decoration: none;
  color: #007bff;
}

/* 悬停时添加下划线 */
a:hover {
  text-decoration: underline;
}

场景2: 删除线

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

.original-price {
  text-decoration: line-through;
  font-size: 14px;
  color: #999;
}

场景3: 重点标注

.highlight {
  text-decoration: underline wavy red;
}

场景4: 错误文本

.error {
  text-decoration: underline dotted red;
}

场景5: 标题样式

.fancy-title {
  text-decoration: underline double blue;
  text-underline-offset: 5px;
}

浏览器兼容性

特性	Chrome	Firefox	Safari	IE
基础支持	✅	✅	✅	✅
wavy	✅	✅	✅	❌
thickness	✅	✅	✅	❌

学习要点

常用值: underline, line-through, none
样式: solid(实线), wavy(波浪线)
复合: text-decoration: underline wavy red;
应用: 去掉链接下划线、删除线、重点标注
兼容: wavy 和 thickness IE 不支持

css学习