使用CSS3線性漸變（linear-gradient）實現文本波浪線效果

我們在讀紙質書的時候，經常用筆劃波浪線來突出重點內容，以強化視覺感受。
而在Web頁面上，沒有CSS3之前，我們只能用背景圖片來實現類似功能，這當然不是個高效的方式，且難於維護和調整。
比如你只是想調整下顏色、線條大小和傾斜的角度，你都得打開作圖軟件來折騰一下。
現在我們可以使用CSS3偽元素及其背景漸變（gradient）來實現這一有趣而實用的效果。

波浪線特征
我們觀察下波浪線，有這麼2個基本幾何特征：
1. 波折線是重複的，可以被分解為若乾相連的“角”形狀
2. 這些“角”的連接點處是平滑過渡的，不能出現毛刺，所以需要對頂點處做平滑處理
對於（1），我們可以首先創建一個尖角形狀（由一撇一捺2條短直線組成），然後使用x方向的repeat來重複。
對於（2），我們可以使用漸變色，模擬人手劃線時，在轉彎處力道減弱，我們在尖角相交處使用相對淡色，構造出圓角的視覺感受。
CSS3線性漸變
我們注意到每個“角”都有2條邊，如果以默認漸變軸（從上往下的一條垂直線）來看，左邊的呈現45°傾斜，而右邊的呈現315°傾斜。
那麼如何創建一個45°的傾斜線呢？我們很容易想到用rotate變換，但是rotate是作用於整個元素上的，在這裏並不適用。
我們換個思路，CSS3中的線性漸變（linear-gradient）可以完成上述要求，線性漸變的核心是漸變軸、起點終點和顏色值分布。
通過設置漸變軸的角度為45°，我們可以得到傾斜的特性，然後我們再把漸變寬度縮窄到一個線條的大小，具體代碼如下：

div {
  background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); 
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

上面linear-gradient方法中的第一個參數是漸變軸角度，漸變將沿漸變軸開展，也就是漸變線的角度為45°。
後面的參數表示從0到45%的長度上為透明，45%到55%為紅色漸變，55%到100%為透明。
也就是只有元素背景長度的10%出現漸變色（且是兩邊對稱），第二行代碼把背景的寬度設置為20px，那麼漸變線的實際寬度為(20px)*10%=2px。
這樣我們就得到了一根短折線，具備45°傾斜，且帶漸變。
類似的，我們可以得到一根315°的漸變短折線：

div {




 background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);
 background-size: 20px 20px;
 background-repeat: no-repeat;
}

但是現在我們得到的是2條交叉的線條，形成一個“X”形狀，這並不是我們想要的。
一個簡單的技巧就是設置元素的高度為1/2，就得到了一個“V”形。
然後，我們把background-repeat設置為repeat-x，就得到了波浪線形狀。
CSS3 :before偽元素
我們還剩最後一步，我們需要把波浪線形狀添加到文本下面，只要把上面的div元素改成對應文本的:before偽元素即可。
我們還可以設置不同的漸變顏色用以標注不同的文本。
你可以自己在線試試：http://wow.techbrood.com/fiddle/5868by iefreer