我已经读过这个伟大的问题
Transparent hollow or cut out circle
但我想画更多的圈子(比方说三个).
但我想画更多的圈子(比方说三个).
所以我尝试使用一个额外的元素为圆,而不是一个伪元素(所以我可以添加更多),它适用于一个圆,但不是更多.问题在于它们不透明,因为最后一个涵盖了所有内容.这是我的尝试：
body{
background-color:violet;
}
.shape{
height: 150px;
width: 150px;
position:relative;
overflow:hidden;
}
.hole{
position:absolute;
border-radius:100%;
width:30px; height:30px;
color:red;
Box-shadow: 0px 0px 0px 2000px black;
}
.hole:nth-child(1) {
left:25px; top:25px;
}
.hole:nth-child(2) {
left:65px; top:25px;
}
.hole:nth-child(3) {
left:55px; top:65px;
}
<div class="shape"> <div class="hole">1</div> <div class="hole">2</div> <div class="hole">3</div> </div>
解决方法
只需使用svg.面罩的黑色部分从被应用的元件上移除并保持白色：
html,body {
height: 100%;
margin: 0;
background: linear-gradient(to top,red,blue);
}
svg {
display: block;
width: 150px;
}
<svg viewBox="0 0 150 150"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white" /> <circle cx="40" cy="40" r="15" fill="black" /> <circle cx="80" cy="40" r="15" fill="black" /> <circle cx="70" cy="80" r="15" fill="black" /> </mask> <rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" /> </svg>
