css設置文本裝飾的核心方法是使用text-decoration屬性，包括1.添加下劃線、上劃線、刪除線；2.控制顏色用text-decoration-color；3.改變樣式用text-decoration-style；4.調整粗細用text-decoration-thickness；5.簡寫屬性可合并多個設置；6.移除鏈接默認下劃線可用text-decoration: none；7.過度使用可能影響可讀性；8.text-underline-offset用于調整下劃線與文字間距。
css設置文本裝飾，主要通過text-decoration屬性，包括下劃線、上劃線、刪除線等，以及控制下劃線的顏色、樣式和粗細。
解決方案：
CSS提供了多種方式來控制文本裝飾，核心在于text-decoration屬性。這個屬性是一個簡寫屬性，可以同時設置下劃線、上劃線、刪除線等，以及它們的樣式和顏色。
立即學習“前端免費學習筆記（深入）”；
如何使用text-decoration屬性？
text-decoration屬性可以接受多個值，這些值可以組合使用，以達到不同的效果。最常用的值包括：
- underline: 添加下劃線。
- overline: 添加上劃線。
- line-through: 添加刪除線。
- none: 移除所有文本裝飾，通常用于移除鏈接的默認下劃線。
例如，要為一個段落添加下劃線，可以這樣寫：
p { text-decoration: underline; }
如何控制下劃線的顏色？
text-decoration-color屬性用于設置文本裝飾的顏色。例如，將下劃線設置為紅色：
a { text-decoration: underline; text-decoration-color: red; }
值得注意的是，在一些舊版本的瀏覽器中，text-decoration-color可能不被支持。
如何改變下劃線的樣式？
text-decoration-style屬性用于設置文本裝飾的樣式。常用的樣式包括：
- solid: 實線 (默認值)。
- double: 雙線。
- dotted: 點線。
- dashed: 虛線。
- wavy: 波浪線。
例如，將下劃線設置為虛線：
span { text-decoration: underline; text-decoration-style: dashed; }
如何調整下劃線的粗細？
text-decoration-thickness屬性用于設置文本裝飾的粗細。可以使用像素值（px）、em、rem等單位。
h1 { text-decoration: underline; text-decoration-thickness: 3px; }
或者使用相對值：
text-decoration簡寫屬性的完整用法
實際上，可以將text-decoration-line (下劃線/上劃線/刪除線)、text-decoration-color、text-decoration-style和text-decoration-thickness合并為一個text-decoration屬性。
例如：
.highlight { text-decoration: underline wavy red 2px; }
這個例子等價于：
.highlight { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; text-decoration-thickness: 2px; }
如何移除鏈接的默認下劃線？
鏈接的默認下劃線有時候會影響頁面美觀，可以使用text-decoration: none;移除。
a { text-decoration: none; } a:hover { text-decoration: underline; /* 鼠標懸停時顯示下劃線 */ }
通常，我們會結合偽類:hover，在鼠標懸停時添加下劃線，以增強用戶體驗。
文本裝飾會影響可讀性嗎？
過度使用文本裝飾會降低可讀性。例如，過多的下劃線會使文字顯得雜亂。因此，在設計網頁時，應該謹慎使用文本裝飾，確保其服務于內容，而不是分散用戶的注意力。
text-underline-offset屬性的作用是什么？
text-underline-offset屬性用于調整下劃線與文字的距離。這個屬性可以接受長度值（如px、em）或者auto。
例如：
p { text-decoration: underline; text-underline-offset: 0.3em; /* 下劃線距離文字0.3em */ }
text-underline-offset: auto; 通常會讓瀏覽器自動決定下劃線的位置，但有時手動調整可以獲得更好的視覺效果。尤其是在字體設計比較特殊的情況下，這個屬性非常有用。
