CSS是前端開發(fā)中必不可少的一部分，通過它可以為網(wǎng)頁添加各種各樣的樣式效果。在這里，我們將介紹如何使用CSS來實現(xiàn)矩形一邊波浪的效果。

.wave-border {
position: relative;
width: 200px;
height: 50px;
border: 1px solid #ccc;
overflow: hidden;
}
.wave-border:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 0;
height: 20px;
width: 100%;
background: #eee;
border-radius: 50% 50% 0 0;
}
.wave-border:after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
height: 15px;
width: 100%;
background: #eee;
border-radius: 0 0 50% 50%;
transform: rotate(180deg);
}

首先，我們創(chuàng)建一個HTML容器，設(shè)置寬200像素，高50像素，并且為該容器添加一個邊框，用于模擬實際效果。

然后，我們使用偽元素創(chuàng)建兩個半圓形波浪，一個在容器的頂部，一個在底部。使用絕對定位將它們放置在正確的位置，使得頂部的半圓形覆蓋住容器頂部邊框的一部分，而底部的半圓形則與底部邊框相連。

最后，我們使用CSS屬性border-radius，將偽元素半圓形的形狀調(diào)整為半圓形。在頂部的偽元素中，我們將左上角和右上角的半徑設(shè)置為50%，而在底部的偽元素中，我們將左下角和右下角的半徑設(shè)置為50%。

這樣，一個矩形一邊波浪的效果就完成了。