在css中如何用text-decoration装饰文字-css教程-PHP中文网

在css中如何用text-decoration装饰文字

P粉602998670

发布： 2025-10-19 13:58:01

原创

184人浏览过

text-decoration用于设置文本装饰效果，如underline下划线、line-through删除线、overline上划线，支持颜色、样式、粗细等属性，可简写为text-decoration: line style color thickness，常用于去除链接下划线或标注价格删除线。

在css中如何用text-decoration装饰文字

在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;

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

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

顺序不限，但推荐按 “line style color thickness” 的逻辑书写。

常见应用场景

- 去除超链接默认下划线：a { text-decoration: none; } - 显示删除价：.old-price { text-decoration: line-through; } - 强调标题或关键词：.highlight { text-decoration: overline underline; }（可同时应用多条线）

基本上就这些。text-decoration 简单实用，配合颜色和样式能让文本更有表现力。

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