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