text-decoration用于设置文本装饰,可控制下划线、删除线等样式,常用于去除链接下划线、标注失效价格及自定义下划线颜色与线型,推荐使用text-decoration-line、color、style子属性以获得更精确控制。
在CSS中,text-decoration 属性用于设置或删除文本的装饰效果。它是一个简写属性,可以同时控制下划线、上划线、删除线以及文本下的颜色和样式。这个属性常用于链接样式、强调文本或去除默认样式。
常见取值包括:
2. 添加删除线表示已失效内容比如在价格对比中,原价加删除线:css
.old-price {
text-decoration: line-through;
}
3. 自定义下划线样式(CSS3扩展)CSS3 扩展了 text-decoration,支持颜色和线型:css这会创建一条红色波浪形下划线。
p {
text-decoration: underline red wavy;
}
示例:css
h1 {
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: wavy;
}
n 的继承行为有时不可预测,某些情况下子元素不会自动继承,需显式设置。基本上就这些。合理使用 text-decoration 能提升页面可读性和视觉层次,关键在于根据内容语义选择合适的装饰方式。