CSStext-decoration属性全解析

想要玩转CSS文本样式？`text-decoration`属性绝对是你的利器！本文将深入解析CSS `text-decoration`属性，教你轻松控制文本的下划线、删除线等装饰效果，告别单调的默认样式。从去除恼人的链接下划线，到用删除线标注失效价格，再到自定义个性化的下划线颜色和线型，`text-decoration`都能帮你实现。掌握`text-decoration-line`、`text-decoration-color`、`text-decoration-style`等子属性，更能精细化控制文本装饰效果，打造更具吸引力的网页视觉效果。快来学习如何巧妙运用`text-decoration`，提升你的网页设计水平吧！

text-decoration用于设置文本装饰，可控制下划线、删除线等样式，常用于去除链接下划线、标注失效价格及自定义下划线颜色与线型，推荐使用text-decoration-line、color、style子属性以获得更精确控制。

在CSS中，text-decoration 属性用于设置或删除文本的装饰效果。它是一个简写属性，可以同时控制下划线、上划线、删除线以及文本下的颜色和样式。这个属性常用于链接样式、强调文本或去除默认样式。

基本语法

常见取值包括：

• none：默认值，不显示任何文本装饰。
• underline：在文本下方添加一条线。
• overline：在文本上方添加一条线。
• line-through：在文本中间画一条贯穿线（删除线）。
• blink：让文本闪烁（大多数浏览器已弃用）。

常见使用场景

2. 添加删除线表示已失效内容比如在价格对比中，原价加删除线：css
.old-price {
  text-decoration: line-through;
}


3. 自定义下划线样式（CSS3扩展）CSS3 扩展了 text-decoration，支持颜色和线型：css
p {
  text-decoration: underline red wavy;
}
这会创建一条红色波浪形下划线。

子属性（现代用法）

• text-decoration-line：指定装饰线类型（如 underline, line-through）。
• text-decoration-color：设置装饰线颜色。
• text-decoration-style：设置线型，如 solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、wavy（波浪线）。

示例：css
h1 {
  text-decoration-line: underline;
  text-decoration-color: blue;
  text-decoration-style: wavy;
}


注意事项

基本上就这些。合理使用 text-decoration 能提升页面可读性和视觉层次，关键在于根据内容语义选择合适的装饰方式。

今天关于《CSStext-decoration属性全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！