text-decoration
Baseline 廣泛可用 *
text-decoration 簡寫 CSS 屬性設定文字上裝飾線的顯示樣式。它是 text-decoration-line、text-decoration-color、text-decoration-style 以及較新的 text-decoration-thickness 屬性的簡寫。
試一試
text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #ff3028;
<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;
}
文字裝飾會繪製在後代文字元素上。這意味著如果一個元素指定了文字裝飾，那麼子元素不能移除該裝飾。例如，在標記 <p>This text has <em>some emphasized words</em> in it.</p> 中，樣式規則 p { text-decoration: underline; } 會導致整個段落帶下劃線。樣式規則 em { text-decoration: none; } 不會引起任何變化；整個段落仍然會帶下劃線。但是，規則 em { text-decoration: overline; } 會導致在“some emphasized words”上出現第二個裝飾。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;
/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;
text-decoration 屬性被指定為一個或多個用空格分隔的值，這些值表示各種長寫文字裝飾屬性。
值
text-decoration-line-
設定使用的裝飾型別，例如
underline（下劃線）或line-through（刪除線）。 text-decoration-color-
設定裝飾的顏色。
text-decoration-style-
設定用於裝飾的線條樣式，例如
solid（實線）、wavy（波浪線）或dashed（虛線）。 text-decoration-thickness-
設定用於裝飾的線條粗細。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性 |
正式語法
text-decoration =
<'text-decoration-line'> ||
<'text-decoration-thickness'> ||
<'text-decoration-style'> ||
<'text-decoration-color'>
<text-decoration-line> =
none |
[ underline || overline || line-through || blink ] |
spelling-error |
grammar-error
<text-decoration-thickness> =
auto |
from-font |
<length-percentage>
<text-decoration-style> =
solid |
double |
dotted |
dashed |
wavy
<text-decoration-color> =
<color>
<length-percentage> =
<length> |
<percentage>
示例
text-decoration 值的演示
css
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
This <a class="plain" href="#">link will not be underlined</a>, as links
generally are by default. Be careful when removing the text decoration on
anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
This text might blink for you, depending on the browser you use.
</p>
結果
規範
| 規範 |
|---|
| CSS 文字裝飾模組級別 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
瀏覽器相容性
載入中…
另見
- 單獨的 text-decoration 屬性是
text-decoration-line、text-decoration-color、text-decoration-style和text-decoration-thickness。 text-decoration-skip-ink、text-underline-offset和text-underline-position屬性也會影響 text-decoration，但未包含在簡寫中。list-style屬性控制 HTML<ol>和<ul>列表中專案的顯示樣式。- SVG
text-decoration屬性