使用一个元素在它后面的元素中创建一个“窗口”

Question

我正在尝试使用 HTML 和 CSS 来实现一种效果，其中我可以定义一个区域，该区域变得有点像元素中的窗口。我不能只在前面放一个白色 div，因为我希望窗口可以显示元素后面的内容，就像在 this 示例中一样，在橙色元素中切出一个孔以显示后面的内容。使用 HTML 和 CSS 是否有可能？

Answer 1

您可以使用 CSS 边框来做到这一点：

body {
  background-color: black;
}
.mask {
  width: 150px;
  height: 150px;
  border: 50px solid orange;
  border-radius: 20px;
  margin: 200px auto;
  border-left-width: 200px;
  border-top-width: 200px;
  color: white;
}

<div class="mask">
  abc
</div>

它就像一个面具，但内容和背景一样仍然可见。