[分享]css3实现波浪边框

这是一个漂亮的波浪边框，使用CSS3实现，让你的网页更加美观！

.wave-border {
	  		border: none;
	  		position: relative;
		  	background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
		}
		.wave {
	  		position: absolute;
	  		bottom: -1px;
	  		left: 0;
	  		width: 100%;
	  		height: 15px;
	  		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
	 	} 

在上面的样式中，我们使用了两个CSS规则：.wave-border 和 .wave来实现波浪边框效果。
首先，.wave-border规则用于确定容器的边框，并将背景颜色设置为渐变色。然后，.wave规则用于在容器底部创建一个波浪效果，通过 position: absolute 和 bottom: -1px 规则，使其沉浸在容器底部，而通过 width: 100% 和 height: 15px 规则，使其占据整个底部。 最后，使用background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x属性来设置波浪图案，并且将其水平平铺重复。
你可以使用类似的方式，在你的网页中实现类似的波浪边框效果。