text-underline-offset的作用是什么，怎么使用

最新推荐文章于 2024-12-22 08:01:45 发布

读心悦

最新推荐文章于 2024-12-22 08:01:45 发布

阅读量667

点赞数 7

分类专栏：深入浅出CSS 文章标签： css3

本文链接：https://blog.csdn.net/xuelian3015/article/details/139699738

版权

深入浅出CSS 专栏收录该内容

124 篇文章

订阅专栏

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 的作用和使用方法！