本文主要介紹的是關(guān)于CSS文字修飾的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
一、text-decoration
相信大家對于text-decoration這個屬性并不陌生，在重置a標(biāo)簽的默認(rèn)樣式時，我們經(jīng)常要這樣寫：text-decoration: none;可能對它了解的人也很少，實際上text-decoration是一個復(fù)合屬性，由line、style和color組成。
所以我們可以實現(xiàn)這樣的效果：
下劃黃色虛線
可惜的是line只有underline(下劃線)、overline(上劃線)和line-through(刪除線)。如果突然需要下劃波浪線，怎么辦呢？不要急，神奇的CSS會幫你做到的。首先，你需要先了解一下漸變的使用技巧。先上效果圖吧:
漸變實現(xiàn)文字波浪線
說一下這里的思路，我們首先要用兩段漸變構(gòu)造一個基本元素：'X'(這里我就不放圖了)，下一步就比較重要了，我們要截取'X'的上半部分，得到一個'V',從而結(jié)合repeat形成波浪線。下面是用scss寫的一個mixin，方便以后使用。
@mixin waveline($color,$h) { position: relative; &::after { content: ''; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: $h; background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%); background-size: $h * 2 $h * 2; } }二、text-shadow
對于text-shadow和box-shadow幾乎差不多，它也支持逗號語法，所以它可以生成多個陰影，這里我們要介紹幾個簡單的應(yīng)用：
1、文字的3D效果
這種3D也是利用多重陰影的技巧，下面效果圖：
text-shadow實現(xiàn)3D效果
@mixin threeDText($color) { text-shadow: 1px 1px $color, 2px 2px $color, 3px 3px $color, 4px 4px $color, 5px 5px $color, 6px 6px $color, 7px 7px $color, 8px 8px $color; }這里幾個顏色需要調(diào)節(jié)得當(dāng)，效果才會好一點(diǎn)。
2、文字描邊效果
下面效果圖：
text-shadow實現(xiàn)文字描邊效果
@mixin strokeText($w, $color) { text-shadow: $w 0 0 $color, -$w 0 0 $color, 0 $w 0 $color, 0 -$w 0 $color; }其實這里的效果并不是特別的好，但是可以讓我們驚嘆小小的屬性，大大的用法。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
