如何创建一个透明的圆？

enter image description here

我尝试用这个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; 
}

来源

2014-10-30 user3351236

最简单的方法是只是一个PNG。 – cport1 2014-10-30 13:50:41

http://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle-using-css-only – eclipsis 2014-10-30 13:52:18

最简单的方法是使用透明 DIV与溢出隐藏（灰色之一）
比里面简单地说用的box-shadow一个圆圈，真正的大蔓延。

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>

正如你可以在上面看到我用这可能会导致一些文本中.hasCircle可见（由于重叠伪元素）的:after伪元素，但它只是得到一个想法，你可以使用像这样的一个真实的元素：

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

来源

2014-10-30 14:03:10

灰色的画布是背景。我需要这个背景被切割4次。 – user3351236 2014-10-31 05:35:00

现在在上面的例子中，背景是从圆圈创建的。 – user3351236 2014-10-31 05:36:37

我需要

– user3351236 2014-10-31 05:38:49

如何创建一个透明的圆？

回答

相关问题