如何使带圆角的 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>