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

【问题标题】：Is it possible to hide/remove borders inside of intersected area of multiple divs?是否可以隐藏/删除多个 div 相交区域内的边框？
【发布时间】：2020-02-15 18:46:46
【问题描述】：

当两个或多个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>

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

【问题讨论】：

通过指定 z-index 至少可以达到一半，否则边框 CSS 属性通常仅适用于上、下、左和右。您只能隐藏边框的一部分，例如“border-left：hidden;”但它可能无法完全按照您的意愿工作。
如果任何地方都有答案，它很可能在这里developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

标签： html css css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

根据您的第一个查询，使用 CSS 使相交边框不可见是不可能的。但是，如果您想实现上述设计，您可以使用伪元素技巧来实现这一点。您可以为“#two”id 创建伪元素，并使其位置相对于中心 div 的高度和宽度是绝对的。您肯定需要进行一些调整。我已经为你添加了 sn-p。请尝试一下。

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

          #two {
            left: 50px;
            background: #fff;
          }

          #two:after {
            content: "";
            background: #fff;
            width: 100%;
            height: 88px;
            top: 6px;
            left: -2px;
            position: absolute;
            z-index: 9;
            -ms-transform: rotate(20deg);
            transform: rotate(.2deg);
          }

          #three {
            left: 100px;
            background: #fff;
          }

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

【讨论】：

【解决方案3】：

另一种可能性是mix-blend-mode（如果有的话）：

 /* === HERE ==== comment where it matters , the rest is only styling */
div {
  width: 20vmax;
  height: 20vmax;
  border: solid;
  background: white;/* === HERE ====*/
  border-radius: 50%;
  margin: auto;
  position: relative;
  font-size:4vmax;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 10px, inset 0 0 2px;
  animation:shift 4s infinite ease-in-out alternate;
}
div::before,
div::after {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  border: inherit;
  border-radius: inherit;
  box-shadow:inherit;
  mix-blend-mode:screen;/* === HERE ====*/
  animation:shift 2s infinite ease-in-out alternate;
}
div::before {
  left:-50%;
}
div::after {
  left:50%;
  animation-delay:-1s;
}
p {z-index:1;}
@keyframes shift {
25% {transform:translate(5%,-5%) scale(1.2);}
50% {transform:translate(-5%,5%) scale(0.9);}
}
html {display:flex;min-height:100vh;}
body {margin:auto;}

&lt;div&gt;&lt;p&gt;Hi, Cloudy&lt;/p&gt;&lt;/div&gt;

demo for the fun

【讨论】：

如果我们考虑到边框总是黑色的事实，我会使用 lighten 作为混合混合模式，这将适用于您将用作背景的颜色。