如何創建一個透明的圓？

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

如何創建一個透明的圓？

回答

相關問題