仅使用css(剪切)的多个透明圆圈

Question

我已经读过这个很棒的问题已经是透明的空心或切出圆圈, 但我想绘制更多的圆圈(让我们说三个).

所以我尝试为圆圈使用额外的元素而不是伪元素(所以我可以添加更多),它适用于一个圆圈,但不是更多.问题是它们不透明,因为最后一个涵盖了一切.这是我的尝试:

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>

Answer 1

只需使用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>

Answer 2

如果你真的想用CSS做这个,如果你不怕多个盒子阴影,你可以这样做但是你必须知道这是硬编码的,当cirlces改变时必须更新box-shadow的值位置,大小或数量.

以下是您可以使用的方法的示例,框阴影的值应该"优化":

body {
  background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
}
.shape {
  height: 150px;
  width: 150px;
  position: relative;
  overflow: hidden;
}
.hole {
  position: absolute;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  color: red;
}
.hole:nth-child(1) {
  left: 25px;
  top: 25px;
  box-shadow: -38px -33px 0px 55px black, 9px 14px 0px 0px black;
}
.hole:nth-child(2) {
  left: 65px;
  top: 25px;
  box-shadow: 76px -63px 0px 100px black, -7px 6px 0px 0px black;
}
.hole:nth-child(3) {
  left: 55px;
  top: 65px;
  box-shadow: -3px 91px 0px 100px black;
}

<div class="shape">
  <div class="hole">1</div>
  <div class="hole">2</div>
  <div class="hole">3</div>
</div>

除此之外,我会清楚地建议使用SVG使用屏蔽/剪辑或使用您链接的答案中显示的路径.下面是使用带有arc命令的path元素的几个切出透明圆的示例:

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}

<svg viewbox="-10 -1 30 15">
  <path d="M-10 -1 H30 V15 H-10z 
           M 5 5 m -5, 0 
           a 5,5 0 1,0 10,0 
           a 5,5 0 1,0 -10,0
           M-3 10 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0
           M15 8 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0
           M-5 5 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0"/>
</svg>

上面的代码是有用的,因此路径元素中的每个圆都是"绘制"的:

M cx cy m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0

圆的中心是cx, cy并且r是它的半径.请参阅此答案以获得解释.
第一行(M-10 -1 H30 V15 H-10z)用于制作周围的矩形,每个cirlce"切出".

这种方法的优点是它适用于所有支持内联svg的浏览器.即使是那些不支持遮蔽或剪裁的人.

要了解其工作原理,您应该看看:

• HTML中的SVG(内联)
• path命令
• 并具体指定arc命令