text-decoration 属性

用户9388783127708
3 阅读5分钟

简介

text-decoration是CSS中用于为文本添加装饰效果的核心属性，主要作用是给文本添加下划线、删除线、上划线等视觉装饰，常用于标记可点击链接、已完成内容、编辑状态文本等场景，通过视觉提示帮助用户理解文本的功能或状态。它是一个简写属性，可以同时设置文本装饰的样式、颜色和线条类型，也可以通过单独的子属性进行更精细的控制。

语法

1. 简写语法：text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;
2. 单独子属性：
   - text-decoration-line：控制装饰线的位置，可选值有none（默认，无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）、blink（已废弃，闪烁效果），可多个值空格分隔同时设置
   - text-decoration-style：控制装饰线的样式，可选值有solid（实线，默认）、double（双实线）、dotted（点线）、dashed（虚线）、wavy（波浪线）
   - text-decoration-color：控制装饰线的颜色，可使用任意CSS颜色值（十六进制、RGB、颜色名等）
   - text-decoration-thickness：控制装饰线的粗细，可选值有auto（默认，浏览器自动计算）、from-font（使用字体文件中定义的粗细）、长度值（如2px）、百分比（如10%）

示例

HTML

复制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-decoration 示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>text-decoration 基础示例</h2>
    <p class="default">默认文本（无装饰）</p>
    <p class="underline">这是带下划线的文本</p>
    <p class="line-through">这是带删除线的文本</p>
    <p class="overline">这是带上划线的文本</p>
    <p class="multi-line">同时带上划线和下划线</p>
    <p class="custom-style">带波浪下划线的文本</p>
    <p class="custom-color">蓝色粗下划线的文本</p>
    <a href="#" class="remove-link">去除默认下划线的链接</a>
</body>
</html>

CSS

复制

/* 基础装饰效果 */
.default {
    text-decoration: none;
}
.underline {
    text-decoration: underline;
}
.line-through {
    text-decoration: line-through;
}
.overline {
    text-decoration: overline;
}
/* 多装饰线同时设置 */
.multi-line {
    text-decoration: underline overline;
}
/* 自定义装饰线样式 */
.custom-style {
    text-decoration: underline wavy;
}
/* 自定义颜色和粗细 */
.custom-color {
    text-decoration: underline solid blue 2px;
}
/* 去除链接默认下划线 */
.remove-link {
    text-decoration: none;
}
.remove-link:hover {
    text-decoration: underline dashed #ff4444;
}

详细解释

  1. .default类：设置text-decoration为none，展示无装饰的默认文本状态 2. .underline/.line-through/.overline类：分别设置单一的下划线、删除线、上划线效果，是最基础的使用方式 3. .multi-line类：同时设置underline和overline，实现文本上下同时有装饰线的效果 4. .custom-style类：指定了装饰线类型为underline，样式为wavy（波浪线），展示自定义装饰线样式的效果 5. .custom-color类：完整设置了装饰线的所有属性，分别是下划线、实线样式、蓝色、2px粗细，展示多属性组合的写法 6. .remove-link类：先去除a标签默认的下划线，然后在hover（鼠标悬停）时添加红色虚线下划线，既优化了默认样式，又保留了链接的交互提示

进阶用法

  1. 编辑状态标记：在富文本编辑器中，使用line-through标记已删除的内容，使用underline标记新增的内容，配合不同颜色区分编辑状态 2. 电商价格展示：给原价添加line-through #999的样式，同时展示红色的现价，突出价格优惠信息 3. 自定义链接样式：给链接设置text-decoration: underline wavy #2196F3，实现区别于默认下划线的特色链接样式，增强品牌视觉识别 4. 表单验证提示：给输入错误的表单提示文本添加wavy red的下划线，直观提示用户输入错误 5. 结合伪元素使用：可以通过::after伪元素配合text-decoration实现更复杂的装饰效果，比如在标题下方添加带颜色的装饰线

常见错误

  1. 错误：给块级元素设置text-decoration后，误以为子元素可以单独取消装饰。实际上text-decoration会继承给子元素，若要取消子元素的装饰，需要单独给子元素设置text-decoration:none 2. 错误：使用blink值实现闪烁效果，该值已被标准废弃，大部分浏览器不再支持，应避免使用 3. 错误：过度使用装饰线，比如同时给文本添加underline、overline、line-through，导致文本可读性极差 4. 错误：设置装饰线颜色时使用与文本完全相同的颜色，导致装饰线不明显，失去提示作用 5. 错误：去除链接下划线后未添加其他交互反馈，导致用户无法识别可点击元素，应在hover/focus状态下添加装饰或颜色变化

使用技巧

  1. 链接样式优化：默认a标签带有下划线，可设置text-decoration:none去除，在hover/focus状态下再添加装饰，提升页面美观度同时保证可访问性 2. 删除线使用场景：常用于电商网站的原价标记、已完成的待办事项，建议搭配较浅的颜色，避免干扰主要内容 3. 装饰线颜色：建议与文本颜色区分开但保持协调，比如使用文本色的70%透明度，既保留提示性又不突兀 4. 避免过度使用：不要同时给文本添加多种装饰线，会导致文本可读性下降，仅在有明确语义需求时使用 5. 可访问性注意：如果使用下划线模拟链接，务必确保有对应的交互反馈，避免混淆普通文本和可点击元素

浏览器兼容性

  1. 基础属性（text-decoration-line的none/underline/overline/line-through）：支持所有现代浏览器，包括IE6及以上 2. text-decoration-style的wavy/double/dotted/dashed：支持Chrome 57+、Firefox 36+、Safari 12.1+、Edge 79+，IE不支持 3. text-decoration-thickness：支持Chrome 87+、Firefox 70+、Safari 14.1+、Edge 87+，IE不支持 4. 简写属性的多值组合：所有支持CSS3的浏览器都能正常解析
avatar
文章
阅读
粉丝