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

效果:

css3实现优惠卷镂空邮票圈圈效果-Qui-Note

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);
}