Question

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

当z-index高于身体和绝对位置时，我应该可以将其移动到页面的任何部分，并“将白色化”圈内的所有内容。“

我尝试了我最喜欢的渐变生成器，但它们没有用。

Answer 1

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

CSS

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

Answer 2

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

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

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

要使边缘更模糊，请将第二个不透明度光标从白色进一步拖动 - 反之亦然。

Answer 3

尝试使用 box-shadow 插入属性的白色背景来创建模糊边缘。虽然我没有给你什么模糊的意思。如果您对边缘有特定的颜色，我可能会给您代码。

Answer 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

Answer 5

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

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

5 个答案: