如何制作圆角内部完全不透明的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>