這篇主要介紹一些文字修飾的相關技巧。這裡主要從text-decoration和text-shadow這兩個屬性聊起
一、text-decoration
相信大家對於text-decoration這個屬性並不陌生，在重置a標籤的預設樣式時，我們經常要這樣寫：text-decoration: none;可能對它瞭解的人也很少，實際上text-decoration是一個複合屬性，由line、style和color組成。
所以我們可以實現這樣的效果：
可惜的是line只有underline(下劃線)、overline(上劃線)和line-through(刪除線)。如果突然需要下劃波浪線，怎麼辦呢？不要急，神奇的CSS會幫你做到的。首先，你需要先了解一下漸變的使用技巧。先上效果圖吧:
說一下這裡的思路，我們首先要用兩段漸變構造一個基本元素：'X'(這裡我就不放圖了)，下一步就比較重要了，我們要擷取'X'的上半部分，得到一個'V',從而結合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幾乎差不多，它也支援逗號語法，所以它可以生成多個陰影，這裡我們要介紹幾個簡單的應用：
1、文字的3D效果
這種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;
}
複製程式碼這裡幾個顏色需要調節得當，效果才會好一點。
2、文字描邊效果
下面效果圖：
@mixin strokeText($w, $color) {
text-shadow: $w 0 0 $color,
-$w 0 0 $color,
0 $w 0 $color,
0 -$w 0 $color;
}
複製程式碼其實這裡的效果並不是特別的好，但是可以讓我們驚歎小小的屬性，大大的用法。
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.