做項(xiàng)目活動(dòng)的過(guò)程中，文字下方有個(gè)波浪線项阴，尋思著滑黔，能不能用css來(lái)實(shí)現(xiàn)，減少資源鲁冯，遂參考一些資料拷沸，嘿，實(shí)現(xiàn)了薯演。所以撞芍，我們今天的主題是“如何用css實(shí)現(xiàn)文字下方的波浪線效果”。
css的設(shè)計(jì)之巧妙跨扮，實(shí)現(xiàn)之精妙序无，細(xì)細(xì)尋味，其妙非凡衡创，妙不可言帝嗡。這波浪線，取巧的運(yùn)用了linear-gradient屬性璃氢，合角度哟玷、顏色、位置于一體一也，配合background-size巢寡，background-repeat，化一為多椰苟，平滑過(guò)渡抑月。哇，這最后的效果太巧秒了舆蝴！塵世間沒(méi)有詞來(lái)形容了…… ? ??
——題記谦絮，改編自《食神》
正文
語(yǔ)法：linear-gradient(direction, color-stop 1, color-stop 2,……）
簡(jiǎn)單用法：background-image: linear-gradient(red, transparent);
增加角度题诵，linear-gradient(45deg, red, transparent)
加個(gè)position：linear-gradient(45deg, red, transparent 45%)
加個(gè)colorlinear-gradient(45deg, red, transparent 45%,red)
不知道大家看到這里，有沒(méi)有如看到一番明鏡层皱，頓悟了性锭。
linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)
linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)
把這兩個(gè)線結(jié)合。
結(jié)合
看到這里奶甘，你知道怎么達(dá)到波浪線效果了么篷店？^_^
高度為原來(lái)的1/2
最終代碼：
文字波浪線效果
同學(xué)祭椰，你臭家，看懂了嗎?_?
如有他言，望多多指教~
