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

问题描述

我有一个透明的径向渐变，我将其用作蒙版图像，以便在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纯黑色”）？

解决方法

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

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,black 31px
  );
}

<div>

</div>

css-mask html