实现原理:radial-gradient 圆形径向渐变重复出现 和 过滤器drop-shadow 元素投影配合使用

效果:

css代码:

#box{width: 300px;height: 120px;position: relative;background:radial-gradient(circle at right bottom,transparent 10px,#fff 0) top right /100% 61px no-repeat, radial-gradient(circle at right top,transparent 10px, #fff 0) bottom right /100% 61px no-repeat;
 filter: drop-shadow(2px 2px 12px #ddd);
}

#box1{width: 300px;height: 120px;margin-top: 50px;position: relative; background:radial-gradient(circle at right,transparent 10px,#fff 0) top right /100% 20px repeat-y; filter: drop-shadow(2px 2px 12px #ddd);
}	

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。