CSS 文字裝飾
文字裝飾
在本章中，您將學習以下屬性
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
為文字新增裝飾線
text-decoration-line 屬性用於為文字新增裝飾線。
提示：您可以組合多個值，例如 overline 和 underline，以便在文字上方和下方都顯示線條。
示例
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
自己動手試一試 »
注意：不建議為非連結文字加下劃線，因為這通常會使讀者感到困惑。
為裝飾線指定顏色
text-decoration-color 屬性用於設定裝飾線的顏色。
示例
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
自己動手試一試 »
為裝飾線指定樣式
text-decoration-style 屬性用於設定裝飾線的樣式。
示例
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
自己動手試一試 »
指定裝飾線的粗細
text-decoration-thickness 屬性用於設定裝飾線的粗細。
示例
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
自己動手試一試 »
簡寫屬性
text-decoration 屬性是以下屬性的簡寫：
text-decoration-line（必需）text-decoration-color（可選）text-decoration-style（可選）text-decoration-thickness（可選）
示例
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
自己動手試一試 »
一個小提示
HTML 中的所有連結預設都有下劃線。有時你會看到連結被 styled 為沒有下劃線。 text-decoration: none; 用於移除連結的下劃線，如下所示：
所有 CSS text-decoration 屬性
| 屬性 | 描述 |
|---|---|
| text-decoration | 在一行宣告中設定所有 text-decoration 屬性 |
| text-decoration-color | 設定文字裝飾的顏色 |
| text-decoration-line | 指定要使用的文字裝飾的型別（下劃線、上劃線等） |
| text-decoration-style | 指定文字裝飾的樣式（實線、點線等） |
| text-decoration-thickness | 指定文字裝飾線的粗細 |
