CSS text-decoration 屬性
示例
為 <h1>、<h2> 和 <h3> 元素設定不同的文字裝飾
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
text-decoration 屬性指定新增到文字的裝飾，它是以下屬性的簡寫屬性：
- text-decoration-line (必需)
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
| 預設值 | none currentColor solid auto |
|---|---|
| 繼承 | no |
| 可動畫 | 否，請參閱單個屬性。 瞭解 animatable |
| 版本 | CSS1，在 CSS3 中更新 |
| JavaScript 語法 | object.style.textDecoration="underline" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| text-decoration | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| text-decoration-line | 設定使用的文字裝飾型別（例如下劃線、上劃線、刪除線） | 演示 ❯ |
| text-decoration-color | 設定文字裝飾的顏色 | 演示 ❯ |
| text-decoration-style | 設定文字裝飾的樣式（例如實線、波浪線、點狀、虛線、雙線） | 演示 ❯ |
| text-decoration-thickness | 設定裝飾線的粗細 | |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
新增更多文字裝飾
h1 {
text-decoration: underline overline dotted red;
}
h2 {
text-decoration: underline wavy blue 5px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 文字裝飾
HTML DOM 參考：textDecoration 屬性
