Css 如何在一个圆上获得多个仅底部边界

我有两个有一些内容的div。一个“盒子”和一个“圆圈”现在我想让它们看起来像一个图形。有点像一个盒子，底部中心有一个圆圈。 很难用语言来解释，我想显示一些代码会更好

标记：

<div class="box">content</div>
<div class="circle">content</div>

现在我想切掉圆的上半部分边界（阴影）。有人知道怎么做吗？也许还有另一种（更好的）方法

---

非常感谢

我不完全确定我是否完全理解它应该是什么样子。我所做的是，我只画了半个圆，然后遮住了边界阴影的蓝色上线

我还发现了另一个stackoverflow问题，它解决了一个类似的问题。

.box{
宽度：500px；
高度：700px；
保证金：0自动；
背景：绿色；
边框：1px纯蓝色；
}
.圆圈{
宽度：100px；
高度：50px；
保证金：10px自动0自动；
背景：白色；
边界半径：0 0 100px 100px；
盒子阴影：0 10像素绿色，0 11像素蓝色；
}
.面具{
位置：绝对位置；
宽度：120px；
高度：1px；
背景颜色：绿色；
左：50%；
右：50%；
转化：translateX（-50%）；
顶部：709px；
}

内容
内容

通过给圆圈加上5px的上边距，我不需要遮住上边距，因为它的颜色与方框的颜色相同。现在的问题是，我想改变“背景白色”为一个圆形的背景图像，这将是削减。不过还是谢谢你。我也可以把图片完全放在这个“图”的上面哦，好吧，我应该先试试。我确实需要面具，你说得对。你有一个盒子期望外观的图形模型吗？我仍然不确定我是否知道它最终应该是什么样子。无法发布图像。我在这方面太新了：）但我用你的修正解决了它。带有方框阴影和5px上边距的半圆。我将遮罩放入.box div并将其放置在底部-1px以遮罩这片边框，并将一个圆形图像绝对放置在该形状/图形的顶部

.box {
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background: green;
    border: 1px solid blue;
}

.circle {
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 10px green,
                            0 0 0 11px blue;
}