使用 css，如何在透明 div 中创建一个白色圆圈？答案

【问题标题】：using css, how to create a white circle within a transparent div?使用 css，如何在透明 div 中创建一个白色圆圈？
【发布时间】：2013-02-21 13:10:52
【问题描述】：

我希望使用 css 渐变在透明 div 中创建一个边缘模糊的白色圆圈。

在 z-index 高于 body 和绝对定位的情况下，我应该能够将它移动到页面的任何部分并“白化”圆圈下方的所有内容。

我已经尝试过我最喜欢的渐变生成器，但没有奏效。

【问题讨论】：

部分不透明背景：rgba(255,255,255,0.5);

标签： html css gradient

【解决方案1】：

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

css

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

【讨论】：

然后添加盒子阴影，我们就完成了 - 你是对的 - 我想太多了！

【解决方案2】：

尝试使用http://www.colorzilla.com/gradient-editor/。

这是我使用他们的工具制作的：（将方向设置为径向）

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

要使边缘更加模糊，请将第二个不透明色标拖离白色更远 - 反之亦然。

【讨论】：

我自己是“终极 CSS 渐变编辑器”的忠实粉丝。我不欣赏顶部的不透明度 - 感谢您的提示
@ccyoung 他们不会无缘无故称其为终极 ;)

【解决方案3】：

尝试使用 box-shadow 的 inset 属性来创建模糊边缘的白色背景。虽然我不明白模糊对你意味着什么。如果您对边缘有特定的颜色，我也许可以给您代码。

【讨论】：

【解决方案4】：

使用 George Reith 建议的渐变。

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

【讨论】：

【解决方案5】：

我想径向渐变对于这种目的来说是一种过度杀伤力。这是一个更简单的解决方案，具有更好的浏览器支持：http://cdpn.io/yrJji

【讨论】：