如何在一个圆上获得多个底部边框

Question

我有 2 个包含一些内容的 div。一个 "box" 和一个 "circle" 现在我想让它们看起来像一个数字。像一个盒子，底部中心有一个圆圈部分。很难用语言来解释，我想显示一些代码会更好。

标记：

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

CSS:

.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;
}

现在我想剪掉圆形边框（阴影）的上半部分。任何人都知道如何完成这项工作？也许还有另一种（更好的）方法可以做到这一点？

非常感谢

Answer 1

我不完全确定我是否完全理解它应该是什么样子。我做的是只画了一半的圆，然后遮掉了边框阴影上面的蓝线。

我还发现了另一个解决类似问题的 Whosebug 问题 here。

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

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

    .mask {
        position:absolute;
        width:120px;
        height: 1px;
        background-color:green;
        left:50%;
        right:50%;
        transform:translateX(-50%);
        top:709px;
    }

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

如何在一个圆上获得多个底部边框

How to get multiple bottom only borders on a circle

css

border

box-shadow