使用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内创建一个白色圆圈？

回答

相关问题