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; } <div class="hollow-compose-three-circles"></div> 

效果图
源自摘抄https://qishaoxuan.github.io/css_tricks/hollowOut/#%E6%A0%B7%E5%BC%8F%E4%B8%89

<!doctype html> <head> <meta charset="UTF-8"> <title>process</title> <style> body{ background: gray; } .many-circles { margin: 10px 0 0 40px; width: 200px; height: 100px; background: radial-gradient(circle at right, transparent 10px, #00adb5 0) top right / 51% 60px no-repeat, radial-gradient(circle at left, transparent 10px, #00adb5 0) top left / 51% 60px no-repeat; /*radial-gradient(circle at top right, transparent 10px, #eeeeee 0) bottom right / 51% 40px no-repeat, radial-gradient(circle at left top, transparent 10px, #eeeeee 0) bottom left / 51% 40px no-repeat;*/ filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); } </style> </head> <body> <div data-v-85036100="" class="many-circles"></div> <script> </script> </body> </html> 

效果如下
在这里插入图片描述

<style> body{ background: gray; } .hollow-one-circle{ display: inline-block; width: 246px; height: 218px; position: relative; background: radial-gradient(circle at 0 106px, transparent 10px, #FF4654 0) top left/246px 100% no-repeat; } .hollow-one-right{ display: inline-block; width: 718px; height: 218px; position: relative; background: radial-gradient(circle at 718px 106px, transparent 10px, #ffffff 0) top left/718px 100% no-repeat; box-shadow:3px 0px 13px 0px rgba(0,0,0,0.03); } .hollow-one-circle::before { content: ''; position: absolute; height: 100%; width:5px; top: 4px; left: 246px; background-image: linear-gradient(to bottom, #FF4654 5px, transparent 5px, transparent), radial-gradient(10px circle at 5px 10px, transparent 5px, #FF4654 5px); background-size: 5px 15px; } .hollow-one-circle:after { } </style> <div data-v-85036100="" class="hollow-one-circle"></div> <div data-v-85036100="" class="hollow-one-right"></div> 

效果如下

原文链接:https://blog.csdn.net/weixin_44021417/article/details/99735351?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782395393704%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782395393704&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-29-99735351-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片