text-underline-offset 是一个 CSS 属性，用于控制文本下划线的偏移位置。换句话说，这个属性可以让你指定下划线距离文本基线的垂直距离。默认情况下，下划线会紧贴文本的基线，但通过设置 text-underline-offset，你可以让下划线与文本之间有一定的间隔。
使用方法
- 基本语法：
text-underline-offset: <length> | auto;
<length>：指定一个长度值，可以是像素（px）、em、rem 等。正值将使下划线向下移动，负值将使下划线向上移动。auto：浏览器将自动计算一个合适的偏移量。
- 示例：
假设你有一个带有下划线的文本，并希望下划线距离文本基线有 5px 的距离：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-underline-offset 示例</title>
<style>
.underlined-text {
text-decoration: underline;
text-underline-offset: 5px;
}
</style>
</head>
<body>
<p class="underlined-text">这是一段带有下划线的文本，下划线距离文本基线有 5px 的距离。</p>
</body>
</html>
- 注意事项：
- 并非所有浏览器都支持
text-underline-offset属性。在编写代码时，请确保你的目标浏览器支持此属性。 - 如果你想要更复杂的文本装饰效果（如双线、波浪线等），可能需要使用其他方法，如 SVG、伪元素（
::before、::after）或字体装饰等。
- 并非所有浏览器都支持
希望这可以帮助你理解 text-underline-offset 的作用和使用方法！
![[Redis] Redis Desktop Manager 安装包和连接和创建流程](https://img-blog.csdnimg.cn/direct/bc94f1bf811d49a2ad4c8998a9fe9b97.png)
