向使用徑向漸變創建的蒙版圖像添加邊框

Question

我有一個透明的徑向漸變，我將它用作蒙版圖像，以便在 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 純黑色”）？

Answer 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>