在css中文本装饰text-decoration使用

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

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

基本语法

常见取值包括：

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

常见使用场景

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

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

Text Mark

处理文本内容的AI助手

49

查看详情

立即学习“前端免费学习笔记（深入）”；

子属性（现代用法）

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

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

注意事项

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

以上就是在css中文本装饰text-decoration使用的详细内容，更多请关注php中文网其它相关文章！