使用CSS，如何在透明的div內創建一個白色圓圈？

我希望通過使用css漸變創建一個包含在透明div內的模糊邊緣的白色圓圈。使用CSS，如何在透明的div內創建一個白色圓圈？

與Z指數高於身體和絕對定位我應該能夠在頁面和圓下方「塗白」一切的任何部分移動這一點。

我曾嘗試我喜歡的梯度發電機，但他們沒有工作。

來源

2013-02-21 cc young

部分不透明背景：'RGBA（255,255,255,0.5）;' – Mooseman 2013-02-21 13:12:23

嘗試使用http://www.colorzilla.com/gradient-editor/。

這裏有一個我使用他們的工具進行的：（設置的方位徑向）

http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom

爲了使邊緣更加模糊，拖第二不透明度從白色進一步停止 - 反之亦然。

來源

2013-02-21 13:15:38

我自己的「終極CSS漸變編輯器」的粉絲。我不喜歡在頂部的不透明度停止 - 感謝提示 – 2013-02-21 13:27:41

@ccyoung他們不稱之爲最終沒有;） – 2013-02-21 14:04:11

<div id="circle"></div>

CSS

#circle { 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
}

來源

2013-02-21 13:13:36 Kumar

再加入箱的影子，我們就大功告成了 - 你是對的 - 我想得太多了！ – 2013-02-21 13:28:11

嘗試白色背景的box-shadow的插圖屬性創建邊緣模糊。雖然我不明白模糊的含義。如果你對邊緣有特定的顏色，我可能會給你代碼。

來源

2013-02-21 13:19:26 CoderGuy

使用由喬治·瑞思提出的梯度。

CSS

#white-circle { 
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent; 
height: 100px; 
left: 150px; 
position: absolute; 
top: 0; 
width: 100px; 
z-index: 1; 
}

這裏是結果：http://jsbin.com/avipih/1

來源

2013-02-21 13:38:45

我想徑向漸變是這樣的目的矯枉過正。這裏有更好的瀏覽器支持多simplier解決方案：http://cdpn.io/yrJji

來源

2013-02-21 14:09:20 prog13

使用CSS，如何在透明的div內創建一個白色圓圈？

回答

相關問題