整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
改變下劃線文本中下劃線的顏色：
p
{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* 針對 Firefox 的代碼 */
}
瀏覽器支持
幾乎所有的主流瀏覽器都不支持 text-decoration-color 屬性。
Firefox 支持另一個可替代該屬性的屬性，即 -moz-text-decoration-color 屬性。
定義和用法
text-decoration-color 屬性規定文本修飾（下劃線 underline、上劃線 overline、中劃線 line-through）的顏色。
注意：只有在帶有可見的 text-decoration 的元素上，text-decoration-color 屬性才起作用。
| 默認值： | currentColor |
|---|---|
| 繼承： | 否 |
| 可動畫化： | 是。請參閱 可動畫化（animatable）。嘗試一下 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.textDecorationColor="red"嘗試一下 |
CSS 語法
text-decoration-color: color|initial|inherit;
屬性值
| 值 | 描述 | 測試 |
|---|---|---|
| color | 規定文本修飾的顏色。 | 測試 ? |
| initial | 設置該屬性為它的默認值。請參閱 initial。 | 測試 ? |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
過CSS文本裝飾可以為文本添加裝飾線、為裝飾線設置顏色、為裝飾線指定風格、為裝飾線設置厚度等效果。
為文本添加裝飾線通過 text-decoration-line 屬性實現，可以結合一個以上的值，如上劃線和下劃線，來顯示文本上方和下方的線條。具體的值有三個：
overline，在文本上方添加線條修飾。
line-through，在文本中間添加線條修飾，實現了刪除線的效果。
underline，在文本下方添加線條修飾，實現了下劃線的效果。
我們來做個例子。
打開編輯器，在 005 文件夾下創建 decoration.html 文件，構建好基本代碼。
添加 h1，h2，h3，p 四個元素。分別填入一些文本。
在 005 文件夾下再創建一個 mystyle-3.css 文件，
定義 h1 選擇器，聲明樣式屬性 text-decoration-line，值為 overline。
定義 h2 選擇器，也聲明樣式屬性 text-decoration-line，值為 line-through。
定義 h3 選擇器，再聲明樣式屬性 text-decoration-line，值為 underline。
回到頁面，通過 link 元素引入 mystyle-3.css 這個外部樣式。
在瀏覽器上預覽效果，我們看：上邊線、刪除線和下劃線就做好了！
實際上，可以同時給文本添加多個線條，實現方法是給 text-decoration-line
[?dek??re??n】屬性設置多個值，每個值通過空格分開。
在 mystyle-3.css 再定義一個 p 選擇器，聲明樣式屬性 text-decoration-line，值寫為 overline underline （讀作overline 空格 underline ）。
看一下效果，段落被添加了兩條裝飾線。
有的小伙伴還記得，給文本添加鏈接后，瀏覽器會默認給這個文本添加一個下劃線。所以，添加了鏈接的文本就不要使用 underline 下劃線裝飾了。
為文本設置裝飾線的顏色通過 text-decoration-color 屬性實現，屬性值為任意合法的顏色值。
給 h1 元素設置 text-decoration-color 屬性，顏色值設置為 red。再快速的給 h2，h3，p 元素設置 text-decoration-color 屬性，值分別為 blue，green，purple。
我們看，線條都有了顏色。
為裝飾線指定風格通過 text-decoration-style 屬性實現，屬性值有五個：
solid，實線。
double，雙實線。
dotted，圓點線。
dashed[d??t]，虛線。
wavy[?we?vi]，波浪線。
為了演示方便，在 html 中再添加一個標題 h4，填入一些文本，在 css 中將全部元素的 text-decoration-line 樣式屬性都設置為 underline。再定義一個 h4 選擇器，聲明樣式 text-decoration-line: underline。
給 h1， h2，h3，h4，p 全部添加 text-decoration-style 屬性，值分別為 solid，double，dotted，dashed[d??t]，wavy。
這樣，各種線條的風格就設置好了！
通過 text-decoration-thickness 屬性為線條設置厚度，也就是線條的粗細。屬性值有三種設置方法：
auto， 默認值，這個值是不確定的，和所修飾的文字大小有關系。
px，像素大小，是一個絕對值。比如 5px。
%，是一個相對值，根據修飾文字的高度計算出來。比如 25%。
在 h1 元素上聲明樣式屬性 text-decoration-thickness，值為 auto。在 h2，h3 上也聲明這個樣式屬性，值分別為 5px，50%。
在瀏覽器里仔細觀察，h1 上的下劃線厚度是瀏覽器給的默認值。h2 上的下劃線厚度是 5px。h3 上的下劃線厚度為文字高度的一半。
回到樣式表代碼，我們分析一下：每個文本修飾的屬性名，均為三個單詞連接起來的，這樣寫起來比較啰嗦，能不能簡化一下呢？可以的！
h1 {
/* text-decoration-line: overline; */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
ext-decoration屬性介紹#
text-decoration屬性值說明表#
值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置刪除線
HTML標簽自帶修飾線#
u標簽#
Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> </head> <body> <u>成功不是擊敗別人，而是改變自己</u> </body> </html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
