CSS text-underline-offset屬性用法及代碼示例

在本文中，我們將討論 CSS 中的 text-underline-offset 屬性。它與帶下劃線的文本一起使用，但不是其中的一部分。設置下劃線與其原始位置的偏移距離。默認情況下，它設置為自動，但我們可以通過指定長度或百分比來增加它。如果任何元素包含多條 text-decoration 行，則 text-underline-offset 僅將下劃線作為其值，而不是其他可能的值，即上劃線 line-through。

用法:

text-underline-offset:auto|<length>|<percentage>;

屬性值：

auto:這是瀏覽器將選擇適當的下劃線偏移的默認值。
<長度>：它將下劃線的偏移量表示為長度單位(也包括負值)，例如 em。
<百分比>：它以百分比表示下劃線的偏移量。
initial:它是自動設置的默認屬性。
inherit:它繼承父級的下劃線偏移值。
unset:它刪除元素的當前偏移值。

例：在此示例中，我們將看到 3 個屬性值的實現。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <title>text-underline-offset property in CSS</title>
      
    <style>
        h2 {
            text-decoration:underline solid green;
            text-underline-offset:auto;
        }
  
        span {
            text-decoration:underline wavy green;
            text-underline-offset:0.1em;
        }
  
        p {
            text-decoration:underline overline dotted red;
            text-underline-offset:90%;
        }
    </style>
</head>
  
<body>
    <h2>Welcome to GeeksforGeeks</h2>
    <span>A computer science portal for geeks.</span>
  
    <p>
        We provide a variety of services for 
        you to learn, thrive and also have
        fun!
    </p>
</body>
  
</html>

說明：對於標題標簽，文本設置為帶有純綠色的下劃線，並且 text-underline-offset 設置為自動值。同樣，我們將 <span> 標簽的 text-decoration 值設置為下劃線波浪綠色和長度值，即 text-underline-offset 值設置為 0.1em。在這種情況下，我們使用了百分比屬性，即 <p> 標簽的 text-decoration 值設置為下劃線，上劃線紅色虛線和 text-underline-offset 值設置為 90%。

輸出：

支持的瀏覽器：

Chrome 87.0 及以上
Edge 87.0 及更高版本
火狐70.0及以上
Opera 73.0 及以上
Safari 12.1 及更高版本

相關用法

注：本文由純淨天空篩選整理自kankshi25大神的英文原創作品 CSS text-underline-offset Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。