Html 仅使用css的多个透明圆（剪切）

我已经读过这个很棒的问题了 但是我想画更多的圆圈（比如说三个）

所以我试着用一个额外的元素来代替伪元素（这样我可以添加更多），它只适用于一个圆，但不适用于更多的圆。问题是，它们不是透明的，因为最后一个覆盖了一切。以下是我的尝试：

正文{
背景色：紫罗兰色；
}
.shape{
高度：150像素；
宽度：150px；
位置：相对位置；
溢出：隐藏；
}
.洞{
位置：绝对位置；
边界半径：100%；
宽度：30px；高度：30px；
颜色：红色；
盒影：0px 0px 0px 2000px黑色；
}
.洞：第n个孩子（1）{
左：25px；顶：25px；
}
.洞：第n个孩子（2）{
左：65像素；顶：25像素；
}
.洞：第n个孩子（3）{
左：55像素；顶：65像素；
}

1.
2.
3.

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

尝试

box阴影：0px 0px 0px 2000px rgba（0,0,0,0.1）


.shape{
高度：150像素；
宽度：150px；
位置：相对位置；
溢出：隐藏；
背景色：#333333；
}
.洞{
位置：绝对位置；
边界半径：20px；
宽度：20px；
高度：20px；
颜色：红色；
背景色：白色；
不透明度：0.6；/*透明度级别在0=不可见和1=不透明之间变化*/
文本对齐：居中；
}
.洞：第n个孩子（1）{
左：25px；顶：25px；
}
.洞：第n个孩子（2）{
左：65像素；顶：25像素；
}
.洞：第n个孩子（3）{
左：55像素；顶：65像素；
}
1.
2.
3.
只需使用svg即可。将遮罩的黑色部分从其应用的元件上移除，并保留白色：


html，正文{
身高：100%；
保证金：0；
背景：线性渐变（顶部、红色、蓝色）；
}
svg{
显示：块；
宽度：150px；
}
如果你真的想用CSS实现这一点，如果你不害怕多个盒子阴影，你可以这样做，但是你必须意识到这是硬编码的，当圆环改变位置、大小或数量时，盒子阴影的值必须更新

以下是您可以使用的方法示例，框阴影的值应“优化”：


正文{
背景：url（'https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg背景尺寸:封面;；
}
.形状{
高度：150像素；
宽度：150px；
位置：相对位置；
溢出：隐藏；
}
.洞{
位置：绝对位置；
边界半径：100%；
宽度：30px；
高度：30px；
颜色：红色；
}
.洞：第n个孩子（1）{
左：25px；
顶部：25px；
盒影：-38px-33px 0px 55px黑色，9px 14px 0px 0px黑色；
}
.洞：第n个孩子（2）{
左：65px；
顶部：25px；
盒影：76px-63px 0px 100px黑色，-7px 6px 0px 0px黑色；
}
.洞：第n个孩子（3）{
左：55px；
顶部：65px；
盒影：-3px 91px 0px 100px黑色；
}

1.
2.
3.
感谢您的努力，但这不是理想的效果，我正在尝试在黑色正方形中绘制透明的圆圈。这并没有解决核心问题。也许它甚至不理解核心问题。这个答案确实理解核心问题。但是这里的事实是很难达到OP的要求，所以这个答案提供了一个替代方案（提问者不同意，这很好：））这种技术不能用于多个圆圈，您必须求助于SVG。每个圆的长方体阴影在彼此上方可见，这使其看起来似乎只剩下一个圆。有趣的问题顺便说一句！你可能会从中得到一些想法，可能会对你有所帮助，朋友，透明度是有层次的。您可以根据需要在0和1之间进行更改。您可以添加自己选择的颜色。如果圆和背景颜色相同，则无法看到圆。即使圆是100%透明的，您也无法看到圆。只有当你有半透明且颜色与背景颜色不同的圆圈时，你才能看到它。很抱歉，在不理解问题的情况下试图给出解决方案：（答案几乎不应该只包含代码。简单而令人敬畏..这是“多个透明圆圈”的完美答案我喜欢这段代码的简单性，它已经被投票通过并被接受了这对未来的读者会很有帮助。@TheodoreK.，看起来很简单：屏蔽的黑色部分被删除，白色部分被保留。@Qwertiy，我明白了，但它在代码片段中有很多内容。把这个小描述放在你的答案中，放在最上面，只是为了帮助未来的读者第一眼就明白，这是一个使用svg屏蔽的答案。无论如何，它是正确的这是你的选择，谢谢你的帮助。