CSS：text-decoration文本装饰

无敌的黑星星

于 2022-11-21 21:46:56 发布

阅读量1.5k

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_41848006/article/details/127973023

版权

本文详细介绍了CSS中text-decoration属性的使用方法，包括如何给文本添加下划线、删除线和上划线等效果，同时讲解了如何设置这些线条的颜色、样式及粗细。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-decoration属性可以给文本加上不同样式的下划线或者删除线
1、 text-decoration-line 线的种类：

underline：下划线
line-through：删除线
overline ：上划线

2、text-decoration-color线的颜色

3、text-decoration-style线的样式

solid 实现
wavy 波浪线
dashed 虚线
dotted 点
double 双下划线

4、 text-decoration-thickness设置用于装饰的线条的粗细

/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* percentage */
text-decoration-thickness: 10%;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;