CSS3的出現(xiàn)，給前端開發(fā)帶來了很多新的特效和樣式。

其中，波浪背景效果是一種很炫酷的效果，可以使網頁看起來更加美觀和時尚。

.wave-bg {
height: 150px;
background-color: #0077cc;
position: relative;
}
.wave-bg:before, .wave-bg:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
left: 0;
background: #006bb3;
}
.wave-bg:before {
top: -25px;
border-radius: 100% 0 0 0;
}
.wave-bg:after {
bottom: -25px;
border-radius: 0 0 100% 0;
}

如上是實現(xiàn)波浪背景效果的CSS代碼。

首先設置一個具有一定高度的div，作為波浪背景的容器。

然后，利用:before和:after偽元素來實現(xiàn)波浪的效果，分別設置在上方和下方，并且利用border-radius屬性讓其呈現(xiàn)出弧形。

通過調整div的高度和偽元素的高度和位置，可以制作出不同樣式的波浪效果。

因為CSS3的兼容性較差，所以需要在瀏覽器兼容問題上注意一下，以保證效果正確顯示。