在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实现皮卡丘