元素中间是透明的，周围有颜色
利用css伪类after可以实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Examples</title> <style> .hole { width: 100px; height: 100px; position: relative; margin-top: 200px; margin-left: 200px; border-radius: 0; background-color: transparent; border: 100px solid #00a1e8; z-index: 1; position: absolute; } .hole:after { position: absolute; height: 100px; width: 100px; left: -50px; top: -50px; content: ''; border-radius: 50%; border: 50px solid #00a1e8; z-index: 5; } </style> </head> <body style="background-color: #333"> <!-- body 设置背景色是为了能看出镂空效果 --> <div class="hole"></div> </body> </html>
简单，用Radial Gradient, 中间用透明色
svg或者css clip-path应该可以
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（3）
利用css伪类after可以实现
简单，用Radial Gradient, 中间用透明色
svg或者css clip-path应该可以