如何使带有圆角的div内部完全不透明，但外部带有颜色（在圆边界线和原始边框线之间）？

Question

假设我有一个图像作为父元素（绿色）的背景。

在子（网格）元素中，我想部分“覆盖”它。给定一个带有圆角的子元素：

• 我不想在边框（橙色）内“覆盖”图像，但是
• 我想在外部（黄色）“遮盖”：在边框线和原始边框框线之间。

“覆盖”是指用0％不透明度填充某种颜色，而不覆盖则是指橙色部分应该是完全不透明的。 （如果绿色部分代表图像本身，则用户应该看到相同的绿色而不是橙色。）

在绿色父项和橙色子项之间引入新元素以用某种颜色填充黄色/外部部分，会使橙色/内部部分也着色，因此这不是解决方案。

我怀疑这可以通过SVG来完成，但是我不知道如何-也许还有另一种方法可以实现。

Answer 1

您可以考虑为元素使用radial-gradient着色以实现此目的。

这里是一个例子：

.wrapper {
  padding:50px;
  display:inline-block;
  font-size:0;
  background:url(https://picsum.photos/id/1069/1000/800) center/cover;
}
.wrapper > div {
  width:150px;
  height:150px;
  display:inline-block;
  background:
    radial-gradient(farthest-side at bottom right,transparent 98%,yellow 100%) top left,
    radial-gradient(farthest-side at bottom left ,transparent 98%,yellow 100%) top right,
    radial-gradient(farthest-side at top    left ,transparent 98%,yellow 100%) bottom right,
    radial-gradient(farthest-side at top    right,transparent 98%,yellow 100%) bottom left;
  background-size:30px 30px;
  background-repeat:no-repeat;
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>