建議先去了解清楚了徑向漸變，線性漸變的用法先

這個作者的css制作波浪線講解很不錯額：https://www.jianshu.com/p/8570433e3669不理解的可以看看這個鏈接的額

可以去菜鳥教程上查找徑向漸變的案例進行更改容易理解其屬性值都是怎麽用的額(*^__^*) 嘻嘻……希望能幫到你

註意： Internet Explorer 9 及之前的版本不支持漸變

代碼結果圖：

代碼如下：

html：

<div class="wave"></div>

css：

.wave{
　　height: .1rem;
　　width: 100%;
　　background-size: .2rem .2rem;
　　background-image: -webkit-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Safari 5.1 - 6.0 */
　　background-image: -o-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Opera 11.6 - 12.0 */
　　background-image: -moz-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Firefox 3.6 - 15 */
　　background-image: radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* 標準的語法（必須放在最後） */
}

CSS制作波浪線