CSS制作波浪线

建议先去了解清楚了径向渐变，线性渐变的用法先

这个作者的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%); /* 标准的语法（必须放在最后） */
}