text-decoration用于设置文本装饰效果，如underline下划线、line-through删除线、overline上划线，支持颜色、样式、粗细等属性，可简写为text-decoration: line style color thickness，常用于去除链接下划线或标注价格删除线。
在CSS中，text-decoration 属性用于为文本添加装饰效果，比如下划线、上划线、删除线等。它是一个简写属性，可以分别设置线条的类型、颜色和样式位置。
基本语法
text-decoration: none | underline | overline | line-through | blink;none：默认值，无装饰线（常用于去除链接的下划线）underline：文字下方加线overline：文字上方加线line-through：穿过文字中间的删除线blink：让文本闪烁（大多数浏览器已不再支持）
示例：
.underline { text-decoration: underline; } .delete { text-decoration: line-through; } .top-line { text-decoration: overline; } .no-underline { text-decoration: none; }
扩展属性（CSS3）
现代浏览器支持更细粒度的控制，你可以使用以下子属性：text-decoration-line：指定装饰线的位置（underline, overline, line-through）text-decoration-color：设置线条颜色text-decoration-style：设置线条样式（solid, double, dotted, dashed, wavy）text-decoration-thickness：设置线条粗细
示例：
.wavy-red { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; }
.thick-blue {
text-decoration: underline blue;
text-decoration-thickness: 2px;
}
简写用法
你可以把多个值写在 text-decoration 一行中：
text-decoration: underline red wavy 2px;
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
立即学习“前端免费学习笔记（深入）”；
顺序不限，但推荐按 “line style color thickness” 的逻辑书写。
常见应用场景
– 去除超链接默认下划线：a { text-decoration: none; }- 显示删除价：.old-price { text-decoration: line-through; }- 强调标题或关键词：.highlight { text-decoration: overline underline; }（可同时应用多条线）
基本上就这些。text-decoration 简单实用，配合颜色和样式能让文本更有表现力。
以上就是在css中如何用text-decoration装饰文字的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004464.html
微信扫一扫 
支付宝扫一扫 
