Html 倒圆形边框

我在实现像照片上那样的倒转边界效果时遇到了巨大的问题。我知道如果它是一个不透明的背景，它会是什么样子，但我不知道它什么时候是完全透明的。你有什么想法吗？谢谢你的帮助

下面是我的非透明背景代码示例：

.box{
宽度：100px；
高度：120px；
保证金：0自动；
位置：相对位置；
背景图像：径向梯度（透明0px，透明10px，橙色10px，橙色）；
背景尺寸：20px 20px；
背景位置：-10px-10px；
&：之前和之后{
内容：''；
显示：块；
位置：绝对位置；
背景颜色：橙色；
}
&：之前{
排名：0；
右：10px；
底部：0；
左：10px；
}
&：之后{
顶部：10px；
右：0；
底部：10px；
左：0；
}
}
.内圆{
高度：100px；
宽度：100px；
背景：橙色；
}

---

尝试应用此属性：

border-radius: 100%;

并访问此链接以了解更多说明：

---

你的html和css在哪里？图像对我不起作用：/请提供一些代码可能重复的可能重复的