仅使用 css（切口）的多个透明圆圈

Question

我已经读过这个很棒的问题 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>

Answer 1

您可以使用 rgba 颜色值指定不透明度，而不是为您的框阴影使用单一颜色以获得所需的效果。

尝试box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0 , 0.1);

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
.shape{  
    height: 150px;
    width: 150px;
    position:relative;
    overflow:hidden;
 background-color:#333333;
}
.hole{
    position:absolute;
    border-radius:20px;
    width:20px; 
 height:20px;
    color:red;
    background-color:white;
 opacity:0.6; /* for transparency levels change between 0=invisible and 1=opaque */
 text-align:center;
}
.hole:nth-child(1) {
    left:25px; top:25px; 
}
.hole:nth-child(2) {
    left:65px; top:25px; 
}
.hole:nth-child(3) {
    left:55px; top:65px; 
}
</style>
</head>
<body>
 <div class="shape">
   <div class="hole">1</div>
   <div class="hole">2</div>
   <div class="hole">3</div>
 </div>
</body>
</html>

Answer 3

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

如果你真的想用CSS做这个并且你不害怕多个框阴影 ，你可以这样做但是你必须知道这是硬编码的，当圆圈改变位置、大小或数字时，必须更新 box-shadow 的值。

这是您可以使用的方法示例，框阴影的值应为 "optimized" :

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 与 masking/clipping 或您链接到的答案中所示的路径一起使用。这是一个示例，其中使用带有 arc 命令的路径元素切出几个透明圆圈：

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>

上面的代码是格式化的，因此路径元素中的每个圆圈都是 "drawn" 和 :

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是半径。有关解释，请参阅 this answer。
第一行(M-10 -1 H30 V15 H-10z)是用来制作周围的矩形和每个圆圈"cuts it out".

这种方法的优点是它适用于所有支持内联 svg 的浏览器。甚至那些不支持遮罩或裁剪的人。

要了解其工作原理，您应该看看：

仅使用 css（切口）的多个透明圆圈

Multiple transparent circles using only css (cutouts)

html

css

svg

css-shapes