在Web設(shè)計中，常常需要用到波浪底紋來增強(qiáng)頁面的裝飾效果。在CSS中實現(xiàn)波浪底紋其實并不難，下面介紹一種簡單的實現(xiàn)方法。
.wave {
position: relative;
width: 100%;
height: 150px; /* 調(diào)整高度 */
background-color: #fff; /* 背景顏色 */
}
.wave::before,
.wave::after {
content: "";
position: absolute;
width: 100%;
height: 80px; /* 調(diào)整波浪峰高度 */
bottom: 0;
background-repeat: repeat-x;
background-position: 0 bottom;
}
.wave::before {
background-image: radial-gradient(circle at center, transparent 20px, #000 20px);
background-size: 40px 40px; /* 調(diào)整波浪周期 */
z-index: 1;
}
.wave::after {
background-image: radial-gradient(circle at center, #000 20px, transparent 20px);
background-size: 40px 40px;
}首先，我們需要創(chuàng)建一個容器
，并設(shè)置其寬度和高度。接著，在容器中創(chuàng)建:before和:after偽元素，并設(shè)置它們的寬度、高度和背景的重復(fù)方式。其中，:before元素是背景色和波浪底紋的混合，而:after元素只是單純的波浪底紋。
通過設(shè)置背景色混合的徑向漸變，可以讓波浪底紋與背景色進(jìn)行混合，達(dá)到更好的視覺效果。而通過調(diào)整字體大小和波浪周期可以讓波浪底紋更貼合實際需求。
如此一來，便可輕松地實現(xiàn)出一個帶有波浪底紋的容器了。