14.文本装饰厚度 (text-decoration-thickness)

text-decoration-thickness CSS属性用于设置装饰线的厚度，如下划线、上划线和删除线。

本章概述

text-decoration-thickness属性为我们提供了对文本装饰线厚度的精确控制，这在传统CSS中是无法实现的。通过这个属性，我们可以创建更加精美和个性化的文本装饰效果，提升网页的视觉表现力和用户体验。

学习目标

• 理解text-decoration-thickness的基本概念和语法

• 掌握不同厚度值类型的使用方法

• 学会与其他文本装饰属性的配合使用

• 了解在实际项目中的应用技巧

• 掌握响应式设计中的厚度控制

• 学会创建动态和交互式装饰效果

text-decoration-thickness基础

基本语法

/* 关键字值 */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* 长度值 */ text-decoration-thickness: 1px; text-decoration-thickness: 0.1em; text-decoration-thickness: 2rem; /* 百分比值 */ text-decoration-thickness: 5%; text-decoration-thickness: 10%; /* 全局值 */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: revert; text-decoration-thickness: unset;

核心概念

• auto: 浏览器选择合适的装饰线厚度

• from-font: 使用字体文件中的厚度值（如果可用）

• length: 指定绝对长度值

• percentage: 相对于当前字体1em的百分比