您现在的位置是：网站首页> 编程资料编程资料
css圆形镂空(优惠券背景图)的实现CSS 使用radial-gradient 实现优惠券样式使用css创建一个优惠券的方法利用css3径向渐变做一张优惠券的示例CSS实现优惠券边沿打孔效果
2023-10-16
219人已围观
简介 这篇文章主要介绍了css圆形镂空(常用做优惠券背景图)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了css圆形镂空(常用做优惠券背景图)，分享给大家，具体如下：
.hollow-compose-three-circles { width: 300px; height: 100px; position: relative; background: radial-gradient(circle at right top, transparent 10px, #00adb5 0) top left / 60px 51% no-repeat, radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat, radial-gradient(circle at left top, transparent 10px, #eeeeee 0) 60px 0/230px 51% no-repeat, radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) 60px 50px /230px 51% no-repeat, radial-gradient(circle at 10px 50px, transparent 10px, #eeeeee 0) 290px 0/10px 100px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); } .hollow-compose-three-circles::after { content: ''; height: 80px; border: 1px dashed #fff; position: absolute; left: 60px; top: 0; bottom: 0; margin: auto; } 
process