css精细控制多行文本下划线样式

网页设计中，简单的text-decoration: underline; 往往无法满足多行文本下划线的个性化需求，例如调整下划线颜色和与文本的垂直距离。本文将演示如何使用CSS实现图示效果：可自定义颜色和距离的多行文本下划线。

目标样式包含三个关键要素：支持多行文本、自定义下划线颜色以及可调的下划线与文本间距。

实现此效果，我们需要text-decoration和text-underline-offset这两个CSS属性。text-decoration用于设置文本修饰效果（如：下划线、删除线），而text-underline-offset则控制下划线与文本基线的垂直距离。

示例代码如下：

p {
  text-decoration: underline;
  text-decoration-color: #007bff; /* 自定义下划线颜色 */
  text-underline-offset: 3px; /* 自定义下划线与文本的垂直距离 */
}

这段代码将段落文本添加蓝色下划线，下划线距离文本基线3像素。 通过修改text-decoration-color和text-underline-offset的值，即可轻松调整颜色和距离。 text-underline-offset的值可为正数（下划线位于文本下方）或负数（下划线位于文本上方）。 多行文本的兼容性取决于浏览器，主流现代浏览器通常能良好支持。 如需更复杂的样式（例如：虚线、点线），可结合text-decoration-style属性使用。