重叠元素上的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>