CSS对重叠元素的透明边框效果

Question

我正在努力找到解决方案来实现这一特殊效果：

棘手的部分是我需要将圆形和矩形作为2个单独的元素，因为它们将包含子节点。

我尝试了多种方法，包括border的颜色透明，shape-属性，元素定位技巧等等。不幸的是，我的任何一项试验都没有获得至少近似的结果。我似乎无法解决这个问题，并且在网络上也找不到任何示例。我最接近的是this thread。

任何帮助将不胜感激。谢谢！

Answer 1

使用radial-gradient，您可以轻松地做到这一点：

.rect {
 margin-top:50px;
 height:120px;
 background:radial-gradient(circle at center,transparent 100px, green 100.5px);
}
.circle {
  margin:-150px auto 0;
  width:180px;
  height:180px;
  background:green;
  border-radius:50%;
}

html {
 background:linear-gradient(to right,pink,white);
 height:100%
}

<div class="rect">
</div>
<div class="circle">
</div>