css3实现优惠卷镂空邮票圈圈效果
七娃博客1,009人阅读
实现原理: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); }
评论 | 0 条评论
登录之后才可留言,前往登录