在前端開發(fā)中，有時候需要在頁面中加入一些裝飾性的元素，其中常見的就是波浪線背景。那么如何使用CSS來實現(xiàn)呢？下面來介紹兩種方式。

1. 使用background-image

首先，我們可以通過設(shè)置背景圖片來實現(xiàn)波浪線背景。

code{
background-image: url(https://cdn.pixabay.com/photo/2020/03/21/13/33/wave-4955534_960_720.png);
background-repeat: repeat-x;
}

其中，background-image設(shè)置背景圖片的鏈接，background-repeat設(shè)置圖片在水平方向上重復(fù)出現(xiàn)。

2. 使用CSS3的波浪線形狀

其次，我們可以利用CSS3的波浪線形狀來實現(xiàn)波浪線背景。代碼如下：

code{
background: #f8f8f8;
padding: 20px;
position: relative;
}
code::before{
content: "";
position: absolute;
background: -webkit-linear-gradient(top, #f5f5f5 0%, #f8f8f8 50%, #f5f5f5 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #f8f8f8 50%, #f5f5f5 100%);
width: 100%;
height: 30px;
border-radius: 50%;
top: -15px;
left: 0;
}

其中，我們先在code元素上設(shè)置一個背景色，再利用偽元素::before來創(chuàng)建一個div元素，然后在該元素上設(shè)置背景色漸變，border-radius設(shè)置圓角，top和left設(shè)置位置。

使用以上兩種方法，都可以輕松實現(xiàn)波浪線背景，具體可根據(jù)自己的實際需求進(jìn)行選擇。