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

Question

我正在努力寻找实现这种特殊效果的解决方案：

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

我尝试了各种方法，包括border透明颜色、shape-属性、元素定位技巧等。不幸的是，我的所有试验都没有产生至少近似的结果。我似乎无法理解这一点，而且我在网上也找不到任何示例。我最接近的是这个线程。

任何帮助将非常感激。谢谢！

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>