CSS 文本装饰

text-decoration 属性用于设置文本的装饰效果，如下划线、上划线、删除线等。

语法

css 
text-decoration: [值];

取值

text-decoration 是一个简写属性，可以同时设置以下三个属性：

  • text-decoration-line：设置装饰线的类型
  • text-decoration-color：设置装饰线的颜色
  • text-decoration-style：设置装饰线的样式

text-decoration-line

  • none：无装饰线
  • underline：下划线
  • overline：上划线
  • line-through：删除线
  • blink：闪烁（已废弃，不建议使用）

text-decoration-color

  • 颜色值（如：red、#ff0000、rgb(255, 0, 0) 等）

text-decoration-style

  • solid：实线（默认值）
  • double：双线
  • dotted：点线
  • dashed：虚线
  • wavy：波浪线

示例

css 
/* 简写形式 */
.underline {
  text-decoration: underline;
}

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

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

.overline {
  text-decoration: overline blue dashed;
}

/* 单独设置 */
.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-style: dotted;
}

/* 清除链接默认下划线 */
a {
  text-decoration: none;
}

实际应用

  1. 链接样式：设置或清除链接的下划线
  2. 强调文本：使用下划线或其他装饰线突出重要内容
  3. 删除线：表示已删除或不再有效的内容
  4. 价格显示：在商品价格中显示原价（删除线）和现价
  5. 特殊标记：根据设计需求创建特殊的文本装饰效果

最佳实践

  1. 避免过度使用：过多的文本装饰会分散用户注意力，降低可读性。

  2. 考虑可访问性：确保装饰线颜色与文本颜色有足够的对比度，便于阅读。

  3. 链接样式：为链接设置明确的装饰样式，使其易于识别。

  4. 使用简写属性：在同时设置多个文本装饰属性时，优先使用简写形式，代码更简洁。

  5. 浏览器兼容性：虽然现代浏览器普遍支持 text-decoration 的各种属性，但在需要兼容旧浏览器时，应注意测试。