Css 如何创建透明圆？

有没有办法在CSS中获得这种效果

我试图玩这个css，但它只剪切第一层

div{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    bottom:50%;
    width:100%;
    height:100%;
    border-radius:100%;
    box-shadow: 0px 300px 0px 300px #448CCB;
}

---

最简单的方法是使用透明DIV，并隐藏溢出（灰色的）
比在里面简单地放一个带框的圆圈阴影，扩散得真大

html，正文{高度：100%；}
身体{
背景：url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446)50%/份；
}
哈斯圈先生{
宽度：150px；
高度：300px；
位置：相对位置；
溢出：隐藏；
浮动：左；
}
哈斯：以后呢{
内容：“；
位置：绝对位置；
左：0；右：0；
保证金：100像素自动；
宽度：100px；
高度：100px；
边界半径：50%；
盒影：0 1000px#444；
}

最简单的方法就是制作一个png。灰色画布是背景。我需要将这个背景剪切4次。现在在上面的示例中，背景是从圆圈创建的。我需要@user3351236。那么，您是否尝试过实现或修改上面的代码？只需使用所需的选择器替换伪零件：）