1

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

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

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

4

5 回答 5

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

css

#circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
}
于 2013-02-21T13:13:36.163 回答
2

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

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

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

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

于 2013-02-21T13:15:38.810 回答
1

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

于 2013-02-21T13:19:26.943 回答
0

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

于 2013-02-21T14:09:20.667 回答
0

使用 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

于 2013-02-21T13:38:45.800 回答