text-decoration-color
text-decoration-color CSS 屬性設定由 text-decoration-line 新增到文字的裝飾線的顏色。
該顏色應用於裝飾，例如下劃線、上劃線、刪除線和用於標記拼寫錯誤的波浪線，在屬性值的範圍內。
試一試
text-decoration-color: red;
text-decoration-color: #21ff21;
text-decoration-color: rgb(255 90 255);
text-decoration-color: hsl(70 100% 40%);
text-decoration-color: currentColor;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
CSS 沒有提供直接機制來為每種線條型別指定唯一的顏色。然而，可以透過巢狀元素、為每個元素應用不同的線條型別（使用 text-decoration-line 屬性）以及按元素指定線條顏色（使用 text-decoration-color）來實現此效果。
語法
css
/* <color> values */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;
/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
值
<color>-
裝飾線的顏色。
無障礙
務必確保文字顏色、文字所在背景以及文字裝飾線之間的對比度足夠高，以便視力低下的人能夠閱讀頁面內容。顏色對比度透過比較文字和背景顏色的亮度值來確定。
不應單獨使用顏色來傳達含義。例如，僅改變文字和文字裝飾顏色不足以指示連結獲得焦點。
正式定義
| 初始值 | currentcolor |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 計算值 | computed color |
| 動畫型別 | 一種顏色 |
正式語法
text-decoration-color =
<color>
示例
基本示例
html
<p>
This paragraph has <s>some erroneous text</s> inside it that I want to call
attention to.
</p>
css
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
規範
| 規範 |
|---|
| CSS 文字裝飾模組級別 3 # text-decoration-color 屬性 |
瀏覽器相容性
載入中…
另見
- 當同時設定多個線條裝飾屬性時，使用
text-decoration簡寫屬性可能更方便。 <color>資料型別- 其他與顏色相關的屬性：
background-color、border-color、outline-color、text-emphasis-color、text-shadow、caret-color和column-rule-color