text-decoration屬性

1、在CSS1中，text-decoration有六個值：

text-decoration:none  //默認，定義標準的文本，沒有任何樣式，正常顯示

text-decoration:underline  //定義文本下的一條線

text-decoration:overline  //定義文本上的一條線

text-decoration:line-through  //定義文本中間的一條線

text-decoration:blink  //定義閃爍的文本， IE、Chrome 或 Safari 不支持 "blink" 屬性值。

text-deration:inherit  //從父元素繼承text-decoration的值，任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

展現形式以下：

text-decoration還支持多值屬性，如text-decoration:underline overline;經我的測試此多值屬性可兼容至IE8，IE7不兼容（有的同窗測試IE7兼容，此狀況需自測）

2、CSS3中新增了一些屬性：

text-decoration:[text-decoration-line] [text-decoration-style] [text-decoration-color]

text-decoration-line就至關於css1中所講的那幾個屬性

text-decoration-style：solid（實線，默認） | double（雙線） | dotted（點狀線） | dashed（虛線） | wavy（波浪線） 瀏覽器支持性很差

text-decoration-color:默認爲文本的顏色，可自設裝飾顏色  瀏覽器支持性很差

3、text-decoration-skip：none | [ objects || spaces || ink || edges || box-decoration ]  目前尚未什麼瀏覽器支持這個屬性

當字符和裝飾線發生重疊關係的時候，例如，刪除線，或者一些英文字符(g, q)和下劃線，咱們的裝飾線是跳過文字字符，仍是直接連在一塊兒穿過去。舉個例子吧，以下CSS：

a { text-decoration-skip: ink; }

可能最後的表現會是這樣：

text-decoration-skip支持的一些值以及含義以下：

• objects: 默認值。 裝飾線跳過內聯對象，比方說圖片啊或者inline-block元素。
• none: 裝飾線穿過一切，包括本應跳過的內聯對象。
• spaces: 裝飾線跳過空格或字符間分隔，以及letter-spacing或word-spacing造成的間距。
• ink: 裝飾線跳過符號或下沉字母。
• edges: 裝飾性起始於內容起始邊緣後面，結束語內容結束邊緣的前面。這個屬性值的目的是爲了讓兩個搞在一塊兒的下劃線元素看上去公用一條下劃線。這對於中文字體頗有用，由於會使用下劃線做爲標點符號。
• box-decoration: 裝飾線跳過繼承的margin, border, 以及padding.
• trailing-spaces: 裝飾線跳過pre或white-space: pre-wrap裏面先後空格。

效果以下圖示意：