如何创建一个透明的圆形？

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

- user3351236

---

最简单的方法就是制作一个PNG文件。 - cport1

http://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle-using-css-only - eclipsis

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>

- Roko C. Buljan

---

灰色画布是背景。我需要将这个背景切割成4份。 - user3351236

现在，在上面的示例中，背景是由圆形创建的。 - user3351236

我需要 <div class="grayBackground"><div class="hasCircle"></div><div class="hasCircle"></div> <div class="hasCircle"></div></div>。 - user3351236

@user3351236 嗯，你尝试过实现或修改上面的代码吗？只需用所需的选择器替换伪代码部分即可 :) - Roko C. Buljan