我已经阅读了这个很棒的问题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>
答案 0 :(得分：11)
只需使用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>
答案 1 :(得分：6)
如果你真的想用 CSS 做这件事，如果你不害怕多个盒子阴影，你可以这样做但< / strong>你必须知道这是硬编码的，当cirlces改变位置，大小或数字时，必须更新box-shadow的值。
以下是您可以使用的方法的示例，框阴影的值应该是＆＃34;优化＆＃34; ：
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>
上面的代码是有用的，因此路径元素中的每个圆圈都是＆＃34;绘制的＆＃34;用：
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）用于制作周围的矩形，每个cirlce＆＃34;将其剪切掉＃34;。
这种方法的优点是它适用于所有支持内联svg的浏览器。即使是那些不支持掩盖或剪裁的人。
要了解其工作原理，您应该看看：
答案 2 :(得分：0)
您可以使用指定不透明度的rgba颜色值，而不是使用单个颜色的阴影来获得所需的效果。
尝试SpannableStringBuilder sb = new SpannableStringBuilder();
sb.append(jsonParsedname.getText() + title.get(i));
int start = sb.length();
sb.append(" Complete")
sb.setSpan(new ForegroundColorSpan(Color.GREEN), start, sb.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.append("Ingredients: " + jsonParseding.getText() + ingre.get(i) + "\n");
sb.append("Link: " + jsonParsedlink.getText() + link.get(i) + "\n");
jsonParsedfinal.setText(sb);
答案 3 :(得分：0)
<!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>