)
text-underline-offset CSS属性控制下划线与其装饰文本之间的距离，允许自定义下划线的位置。
📖 本章概述
text-underline-offset属性为我们提供了对下划线位置的精确控制，这在传统CSS中是无法实现的。通过这个属性，我们可以调整下划线与文本基线的距离，创建更加美观和易读的文本装饰效果，提升网页的视觉表现力和用户体验。
🎯 学习目标
理解text-underline-offset的基本概念和语法
掌握不同偏移值类型的使用方法
学会与其他文本装饰属性的配合使用
了解在实际项目中的应用技巧
掌握响应式设计中的偏移控制
学会创建动态和交互式偏移效果
🚀 text-underline-offset基础
基本语法
/* 关键字值 */ text-underline-offset: auto; /* 长度值 */ text-underline-offset: 1px; text-underline-offset: 0.5em; text-underline-offset: 2rem; text-underline-offset: -0.1em; /* 负值 */ /* 全局值 */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: revert; text-underline-offset: unset;核心概念
auto: 浏览器确定合适的偏移量（默认值）
length: 指定绝对长度值，可以是正值或负值
正值: 增加下划线与文本的距离
负值: 减少下划线与文本的距离，甚至可以穿过文本
🎨 基础应用示例
简单的偏移控制
/* 默认偏移 */ .default-offset { text-decoration-line: underline; /* 浏览器默认偏移 */ } /* 小偏移 */ .small-offset { text-decoration-line: underline; text-underline-offset: 1px; text-decoration-color: #3b82f6; } /* 中等偏移 */ .medium-offset { text-decoration-line: underline; text-underline-offset: 0.5em; text-decoration-color: #10b981; } /* 大偏移 */ .large-offset { text-decoration-line: underline; text-underline-offset: 1em; text-decoration-color: #ef4444; } /* 负偏移 */ .negative-offset { text-decoration-line: underline; text-underline-offset: -0.1em; text-decoration-color: #8b5cf6; }与厚度属性结合
/* 结合厚度控制 */ .styled-underline { text-decoration-line: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: #f59e0b; } /* 细线远距离 */ .thin-distant { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.8em; text-decoration-color: #06b6d4; } /* 粗线近距离 */ .thick-close { text-decoration-line: underline; text-decoration-thickness: 4px; text-underline-offset: 2px; text-decoration-color: #dc2626; } /* 波浪线偏移 */ .wavy-offset { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: #7c3aed; }不同字体大小的适配
/* 小字体 */ .small-text { font-size: 0.875rem; text-decoration-line: underline; text-underline-offset: 0.2em; /* 相对单位适配 */ text-decoration-color: #3b82f6; } /* 正常字体 */ .normal-text { font-size: 1rem; text-decoration-line: underline;
)
