不錯啊

小tip: 了解CSS text-decoration新特性新表現

by?zhangxinxu?from?http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=4831

一、支持良久的text-decoration-line

text-decoration顧名思意就是“文字裝飾”的意思，我們平常使用多的就是鏈接無劃線或者hover下劃線，也就是：

a { text-decoration: none; }
a:hover { text-decoration: underline; }

或者就是團購網站里面，原價￥100, 這個￥100需要被刪掉狀，于是，就直接使用<del>標簽，或者使用span標簽，然后如下text-decoration值：

span { text-decoration: line-through }

當然，text-decoration在CSS2.1時代，支持的屬性值不僅僅上面出現的這幾個，還有與underline對應的overline, 表示上劃線，雖然兼容性不錯，但是似乎沒有什么卵用，鄙人不才，寫CSS這么多年一次都沒有在實際項目中使用過overline.

然后，還有一個blink, 就是text-decoration:blink, 看名字似乎很霸氣，不過我們好像很少見到，更別說使用了，為啥子？

首先，這個text-decoration的裝飾效果是，閃爍。由于鄙人沒見過，也不好描述具體是個什么效果。為什么我沒有見過呢！我查了下資料，原來雖然此屬性值躺在規范里，但是，木有瀏覽器支持這個效果。哦，抱歉，FireFox曾經是支持的，后來可能破壞了府里的規矩，也就乖乖不支持了。于是，現在，大家很難見到text-decoration:blink究竟是個什么效果了。

text-decoration是支持多值的。比方說：

.multiple { text-decoration: underline overline; }

上橫線和下劃線同時出現了。

但是，今天我一測試才發現，原來text-decoration的多值特性連IE7瀏覽器也支持，真是學習了！

然后，我就突發奇想，這文字上面一條線，下面一條線，要是再和border上面一條線下面一條線搞在一起，會有什么怎樣的表現呢？

于是，整了個測試Demo, 您可以狠狠地點擊這里：text-decoration和border和outline關系

結果在宋體下，FireFox/Chrome瀏覽器下，text-decoration線和border線和outline線，正好密不可分纏綿在一起，1像素也不侵占，如下：

但是在IE瀏覽器下，IE7~IE11, 或者所有瀏覽器的微軟雅黑字體下，下劃線和邊框線是有距離的，如下：

但是，無論什么字體，什么瀏覽器，inline元素的上橫行和上邊框和上外框都是緊密連接在一起的。有人可能會疑問，有個卵用？嘿，你還別說，說不定什么時候想實現某圖形生成效果的時候，會有奇用。

OK, 本節的underline/overline等，實際上在新的text-decoraction僅僅是其中text-decoration-line屬性值，只是text-decoraction的一部分。

二、新的text-decoration-style類型

上一節講的都是老CSS的故事，在CSS3時代，text-decoration也發生了一些進化，首先就是文字裝飾的類別變多了。以前就是線啊線的，要么上邊線，要么中間橫個線，或者下劃線。現在牛大了，不僅可以是虛線、點線、雙線、甚至是波浪線。

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

text-decoration-style: inherit;

三、text-decoration-color定義裝飾線的顏色

以前text-decoration的顏色是跟著color走的，我們是不能修改的。但是，現在，新出來了個text-decoration-color, 我們可以愉快地定義裝飾線的顏色……這樣的場景，需要等到瀏覽器足夠兼容才行。

目前最近幾個版本的FireFox瀏覽器無壓力支持text-decoration-color, 但是Chrome瀏覽器還需要去chrome://flags手動開啟“啟用實驗性網絡平臺功能”才可以支持。

三、文字和線的覆蓋關系text-decoration-skip

text-decoration-skip表示，當字符和裝飾線發生重疊關系的時候，例如，刪除線，或者一些英文字符(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里面前后空格。

效果如下圖示意：

這個屬性看上去很牛很強很有用，不過有個不幸地消息要告訴大家，目前還沒有什么瀏覽器支持這個屬性。

不過，目前，存在一種有人問津的情況。在最新的OSX和iOS下，Safari瀏覽器默認對裝飾線的穿越規則進行了修改，默認就是類似text-decoration-skip: ink;的效果，我們可以使用下面這行CSS進行重置：

-webkit-text-decoration-skip: none;

這就是目前唯一的與text-decoration-skip有響應的使用場景，不過，估計很快，大家就能愉快地玩耍了。

四、text-decoration的縮寫

我們目前使用的text-decoration實際上是種縮寫，完整的，應該包括：text-decoration-line,?text-decoration-style,?text-decoration-color等。例如：

text-decoration: underline wavy red;

至于瀏覽器支不支持，則是另外一回事了。

最后，當下搬運工，大家可以同下面這個例子，感受text-decoration的一些新特性和新表現。

五、想不出標題的結束語

因為太晚了，我已經沒有什么想吐槽的了。

明天發工資了，happy~

明天還有看電影的活動，happy~

還有個攤子要收拾……恩……緊上眉頭……

明天是地鐵上班呢還是其他交通工具？

魚缸里的河蚌記得提醒老婆明天放生~~

……

本文部分圖片以及demo參考自”More Control over Text Decoration“，轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址：http://www.zhangxinxu.com/wordpress/?p=4831

（本篇完）

name 是和數據庫的字段對應 ?，， ?沒有的話 不知道是那個字段 ?沒辦法提交到數據庫