html - 是否可以隐藏/删除多个 div 相交区域内的边框？

Question

当两个或多个 div 相交时，它们只是重叠并且它们的边框可见:

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
}

#two {
  left: 50px;
}

#three {
  left: 100px;
}

<div >
  <div class="circle" id="one"></div>
  <div class="circle" id="two"></div>
  <div class="circle" id="three"></div>
</div>

问题是是否可以隐藏那些位于相交区域内的边框，这样看起来就只有一个大形状。以上面的示例为例，结果应如下所示:

Answer 1

您可以尝试使用mask并稍微调整代码以获得更好的控制。技巧是使用多个蒙版，其中每个蒙版都是一个圆形渐变，仅显示边框，并且每个渐变将与每个圆形元素重叠。您可以使用中心元素上的边距来控制重叠:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  transition:0.5s;
}

.box {
  display:inline-flex;
  -webkit-mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

/* You can also have animation*/
.box:hover .circle{
   margin:0!important;
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>

并使用 CSS 变量进行更好的控制:

.circle {
  width: calc(2*var(--r));
  height: calc(2*var(--r));
  border-radius: 50%;
  border: var(--b) solid black;
}

.box {
  --r:50px; /* radius of circles*/
  --b:2px;  /* border length */
  --g:transparent 99%,#fff 100%;
  
  display:inline-flex;
  -webkit-mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:40px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:100px;--b:20px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:80px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>