阅读数:51 评论数:0

一、概述

在 CSS 中，text-decoration 属性用于添加装饰性的线条到文本中。这个属性通常用来控制文本的下划线、上划线、删除线和闪烁效果。text-decoration 是一个简写属性，它可以包含以下几个值：

• text-decoration-line：设置装饰线的类型，如 underline、overline、line-through 或 none。
• text-decoration-color：设置装饰线的颜色。
• text-decoration-style：设置装饰线的样式，如 solid、double、dotted、dashed、wavy 等。
• text-decoration-thickness：设置装饰线的粗细。

text-decoration 属性适用于所有的内联元素，包括 <span>、<a> 等，也可以用于块级元素，但效果会应用到块级元素内的所有内联内容。

二、基本用法

去除文本的下划线：

a {
  text-decoration: none;
}

添加下划线，并设置颜色：

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

使用简写属性同时设置线条类型、颜色和样式：

a {
  text-decoration: underline dotted red;
}

三、css3 text-decoration

在 CSS3 中，text-decoration 的简写属性得到了扩展，允许你在一行代码中设置所有与文本装饰相关的属性：

/* CSS3 语法 */
a {
  text-decoration: underline wavy red;
}

四、注意

• text-decoration 属性不会影响布局，只影响文本的外观。
• 设置 text-decoration: none; 是去除链接默认下划线的常见做法。
• 在某些情况下，你可能需要使用 !important 规则来覆盖其他样式（尽管这不是最佳实践）。