使用CSS径向渐变创建自定义形状

我正在处理一个自定义形状，我非常确定我可以使用径向渐变CSS函数来实现它。到目前为止，我已经完成了一半的工作，如下所示：

。。。使用此CSS代码：

.block {
    width: 600px;
    height: 200px;
    position: relative;
    margin: 50px auto;
    z-index: 1000;

    background-image: -moz-radial-gradient(
        -23px 50%, /* the -23px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        transparent 56px, /* start circle "border" */
        white 57px /* end circle border and begin color of rest of background */
    );
    background-image: -webkit-radial-gradient(-23px 50%, circle closest-side, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
    background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
    background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
    background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
}

现在，我想在右角做同样的圆形（与左角的圆形对称）。我试着用逗号分隔径向梯度函数，但找不到一种方法使它与另一个对称。。。你能帮忙吗

---

谢谢

你可以像下面这样做。2个背景层，每层占一半宽度（比一半稍大一点，以避免出现间隙问题）

.box{
宽度：400px；
高度：200px；
保证金：20px自动；
背景：
径向梯度（左侧圆圈，透明50px，白色51px）左侧，
径向梯度（右侧圆圈，透明50px，白色51px）右侧；
背景大小：51%100%；
背景重复：无重复；
}
身体{
背景：蓝色；
}