如何创建透明圆圈？

Question

有没有办法在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;
}

Answer 1

最简单的方法是使用一个隐藏溢出的透明 DIV (灰色的) 比内部简单地放置一个带有真正大扩散的盒子阴影的圆圈.

html, body{height:100%;}
body{
    background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50% / cover;
}

.hasCircle{
    width:150px;
    height:300px;
    position:relative;
    overflow:hidden;
  float:left;
}
.hasCircle:after{
    content:" ";
    position:absolute;
    left:0; right:0;
    margin:100px auto;
    width:100px;
    height:100px;
    border-radius:50%;
    box-shadow: 0 0 0 1000px #444;
}

<div class="hasCircle"></div>
<div class="hasCircle"></div>
<div class="hasCircle"></div>

正如你在上面所看到的,我使用了:after伪元素,这可能会阻止某些文本.hasCircle被显示(由于重叠的伪元素),但它只是为了得到一个想法,你可以使用如下的真实元素来做:

<div class="boxTransparentOverflow">
   <div class="theTransparentCircleWithGraySpread"></div>
   Some text
</div>