为使用径向渐变创建的蒙版图像添加边框答案

【问题标题】：Adding a border to a mask image created with a radial gradient为使用径向渐变创建的蒙版图像添加边框
【发布时间】：2020-11-02 11:53:40
【问题描述】：

我有一个透明的径向渐变，我将其用作蒙版图像，以便在 div 中“切出一个半圆形的孔”。

我使用透明径向渐变是因为我希望“洞”成为一个实际的“洞”（意思是，我希望能够看到 div“后面”的内容）。

演示：

div {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 2px solid black;
  
  -webkit-mask-image: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  );
}

<div>

</div>

如何为半圆形添加边框（让我们“2px 纯黑色”）？

【问题讨论】：

标签： html css css-mask

【解决方案1】：

使用相同的径向渐变添加渐变颜色：

div {
  width: 200px;
  height: 200px;
  background: 
     radial-gradient(
      circle at center top,
      transparent 30px,
      black 30px 32px,
      green 33px
    ) border-box;
  border: 2px solid black;
  
  -webkit-mask-image: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  );
}

<div>

</div>

【讨论】：