CSS中的text-decoration-skip属性详解

描述
text-decoration-skip是CSS中用于控制文本装饰线（如下划线、删除线）如何跳过特定字符或空格的属性。它解决了装饰线与字符笔画或间距的视觉冲突问题，让排版更加精细美观。

属性值详解

1. none：不跳过任何内容，装饰线连续穿过所有字符和空格
2. objects：跳过内联块元素（如图片、按钮）
3. spaces：跳过空格、单词间隔、标点符号
4. ink：跳过字符笔画的下沉部分（如g、y的尾部）
5. edges：在装饰线起始和结尾处创建小间隙，避免与相邻元素粘连
6. box-decoration：跳过继承的盒模型装饰（如边框、背景）

实际应用示例

/* 基础用法 */
.underline {
  text-decoration: underline;
  text-decoration-skip: ink; /* 跳过字符笔画 */
}

/* 组合使用多个值 */
.fancy-link {
  text-decoration: underline;
  text-decoration-skip: ink spaces; /* 跳过笔画和空格 */
}

浏览器兼容性说明

• 需要添加-webkit-前缀：-webkit-text-decoration-skip
• 现代浏览器已支持无前缀版本
• 部分旧版本Safari支持不完全

实用技巧

/* 创建专业的下划线效果 */
.professional-underline {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink; /* Safari兼容 */
  text-decoration-skip-ink: auto; /* 标准写法 */
  text-decoration-color: #666;
}

注意事项

1. text-decoration-skip-ink是text-decoration-skip: ink的简化属性
2. 多个值同时使用时用空格分隔
3. 建议同时使用标准写法和前缀写法确保兼容性