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

Question

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

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

我尝试了各种方法，包括使用透明颜色的borders、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>