CSS中的text-decoration属性进阶详解

描述
text-decoration属性用于给文本添加装饰线，如删除线、下划线、上划线等。虽然基本用法简单，但其现代CSS规范中扩展了多个子属性，提供了更精细的控制能力。

解题过程

1. 基本语法回顾

/* 简写形式 */
text-decoration: line color style thickness;

/* 示例 */
text-decoration: underline red solid 2px;

2. 分解为子属性详解

text-decoration-line - 设置装饰线类型

• none：无装饰线（默认）
• underline：下划线
• overline：上划线
• line-through：删除线
• blink：闪烁效果（已废弃）

text-decoration-color - 设置装饰线颜色

• 支持所有颜色值格式
• 默认继承文本颜色

text-decoration-style - 设置装饰线样式

• solid：实线（默认）
• double：双实线
• dotted：点线
• dashed：虚线
• wavy：波浪线

text-decoration-thickness - 设置装饰线粗细

• auto：浏览器自动计算
• from-font：使用字体中的建议粗细
• 长度值：如2px、0.1em
• 百分比值：相对于字体大小

3. 实际应用示例

基础装饰效果

.underline {
  text-decoration: underline;
}

.strikethrough {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

高级自定义装饰

.fancy-underline {
  text-decoration-line: underline;
  text-decoration-color: #ff6b6b;
  text-decoration-style: wavy;
  text-decoration-thickness: 3px;
}

.multi-line {
  /* 可以同时应用多种装饰线 */
  text-decoration: underline overline #3d5af1 dashed;
}

4. 文本装饰偏移控制

text-underline-offset - 控制下划线的垂直偏移

.offset-underline {
  text-decoration: underline;
  text-underline-offset: 0.2em; /* 向下偏移 */
}

.negative-offset {
  text-decoration: underline;
  text-underline-offset: -2px; /* 向上偏移 */
}

5. 装饰线的跳过特性

text-decoration-skip-ink - 控制装饰线是否避开字形

.auto-skip {
  text-decoration: underline;
  text-decoration-skip-ink: auto; /* 自动避开字符笔画 */
}

.no-skip {
  text-decoration: underline;
  text-decoration-skip-ink: none; /* 不避开，直接穿过 */
}

6. 现代浏览器支持情况

• 所有现代浏览器都支持基本语法
• text-decoration-thickness需要较新的浏览器版本
• text-underline-offset得到广泛支持
• 建议使用渐进增强策略

7. 实用技巧和最佳实践

响应式装饰线

.link {
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.05em); /* 响应式粗细 */
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .link:hover {
    text-decoration-thickness: 0.15em; /* 悬停时加粗 */
  }
}

替代传统边框方案

/* 传统方式 */
.heading {
  border-bottom: 2px solid blue;
  padding-bottom: 5px;
}

/* 现代text-decoration方式 */
.heading {
  text-decoration: underline solid blue 2px;
  text-underline-offset: 8px; /* 替代padding-bottom */
}

通过掌握这些进阶特性，你可以创建更精美、更可控的文本装饰效果，提升网页的视觉表现力。