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

最新推荐文章于 2022-11-11 12:41:55 发布

兔子敲代码

最新推荐文章于 2022-11-11 12:41:55 发布

阅读量311

点赞数

文章标签： css js css3 html vue

本文链接：https://blog.csdn.net/qq_38499671/article/details/109238105

版权

实现原理：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);
}