不錯(cuò)啊

小tip: 了解CSS text-decoration新特性新表現(xiàn)

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

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

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

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

或者就是團(tuán)購網(wǎng)站里面，原價(jià)￥100, 這個(gè)￥100需要被刪掉狀，于是，就直接使用<del>標(biāo)簽，或者使用span標(biāo)簽，然后如下text-decoration值：

span { text-decoration: line-through }

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

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

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

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

.multiple { text-decoration: underline overline; }

上橫線和下劃線同時(shí)出現(xiàn)了。

但是，今天我一測試才發(fā)現(xiàn)，原來text-decoration的多值特性連IE7瀏覽器也支持，真是學(xué)習(xí)了！

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

于是，整了個(gè)測試Demo, 您可以狠狠地點(diǎn)擊這里：text-decoration和border和outline關(guān)系

結(jié)果在宋體下，F(xiàn)ireFox/Chrome瀏覽器下，text-decoration線和border線和outline線，正好密不可分纏綿在一起，1像素也不侵占，如下：

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

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

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

二、新的text-decoration-style類型

上一節(jié)講的都是老CSS的故事，在CSS3時(shí)代，text-decoration也發(fā)生了一些進(jìn)化，首先就是文字裝飾的類別變多了。以前就是線啊線的，要么上邊線，要么中間橫個(gè)線，或者下劃線?，F(xiàn)在牛大了，不僅可以是虛線、點(diǎn)線、雙線、甚至是波浪線。

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走的，我們是不能修改的。但是，現(xiàn)在，新出來了個(gè)text-decoration-color, 我們可以愉快地定義裝飾線的顏色……這樣的場景，需要等到瀏覽器足夠兼容才行。

目前最近幾個(gè)版本的FireFox瀏覽器無壓力支持text-decoration-color, 但是Chrome瀏覽器還需要去chrome://flags手動(dòng)開啟“啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺功能”才可以支持。

三、文字和線的覆蓋關(guān)系text-decoration-skip

text-decoration-skip表示，當(dāng)字符和裝飾線發(fā)生重疊關(guān)系的時(shí)候，例如，刪除線，或者一些英文字符(g, q)和下劃線，我們的裝飾線是跳過文字字符，還是直接連在一起穿過去。舉個(gè)例子吧，如下CSS：

a { text-decoration-skip: ink; }

可能最后的表現(xiàn)會(huì)是這樣：

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

objects: 默認(rèn)值。 裝飾線跳過內(nèi)聯(lián)對象，比方說圖片啊或者inline-block元素。

none: 裝飾線穿過一切，包括本應(yīng)跳過的內(nèi)聯(lián)對象。

spaces: 裝飾線跳過空格或字符間分隔，以及l(fā)etter-spacing或word-spacing形成的間距。

ink: 裝飾線跳過符號或下沉字母。

edges: 裝飾性起始于內(nèi)容起始邊緣后面，結(jié)束語內(nèi)容結(jié)束邊緣的前面。這個(gè)屬性值的目的是為了讓兩個(gè)搞在一起的下劃線元素看上去公用一條下劃線。這對于中文字體很有用，因?yàn)闀?huì)使用下劃線作為標(biāo)點(diǎn)符號。

box-decoration: 裝飾線跳過繼承的margin,?border, 以及padding.

trailing-spaces: 裝飾線跳過pre或white-space: pre-wrap里面前后空格。

效果如下圖示意：

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

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

-webkit-text-decoration-skip: none;

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

四、text-decoration的縮寫

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

text-decoration: underline wavy red;

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

最后，當(dāng)下搬運(yùn)工，大家可以同下面這個(gè)例子，感受text-decoration的一些新特性和新表現(xiàn)。

五、想不出標(biāo)題的結(jié)束語

因?yàn)樘砹?，我已?jīng)沒有什么想吐槽的了。

明天發(fā)工資了，happy~

明天還有看電影的活動(dòng)，happy~

還有個(gè)攤子要收拾……恩……緊上眉頭……

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

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

……

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

（本篇完）

name 是和數(shù)據(jù)庫的字段對應(yīng) ?，， ?沒有的話 不知道是那個(gè)字段 ?沒辦法提交到數(shù)據(jù)庫