給文字加波浪線效果

這次帶給大家給文字加波浪線效果，給文字加波浪線效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

css的設計之巧妙，實現之精妙，細細尋味，其妙非凡，妙不可言。這波浪線，取巧的運用了linear-gradient屬性，合角度、顏色、位置於一體，配合background-size，background-repeat，化一為多，平滑過渡。哇，這最後的效果太巧秒了！塵世間沒有詞形容了…     

#—題記，改編自《食神》

實作方法

語法：linear-gradient(direction, color-stop 1, color-stop 2,……）

##簡單用法：
background-image: linear-gradient(red, transparent);

#增加角度，linear-gradient(45deg, red, transparent)

#加個position：linear-gradient(45deg, red, transparent 45%)##​​

#加個colorlinear-gradient(45deg, red, transparent 45%,red )

不知道大家看到這裡，有沒有如看到一番明鏡，頓悟了。

linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

#linear-gradient(135deg , transparent 45%, red 55%, transparent 60%)

把這兩條線結合在一起。

結合
看到這裡，你知道怎麼達到波浪線效果了麼？ ^_^

高度為原來的1/2
最終程式碼：

文字波浪線效果

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

常用的顏色漸層方法總結

#2D模擬實現摩天輪旋轉動畫特效

CSS3的box-sizing屬性圖文教學

#

以上是給文字加波浪線效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！