带有阴影CSS的圆3

Question

在我的网页上我有background: gray，现在我需要添加一个白色阴影圆圈，如图中所示。我的一个决定是添加url:('../img/background.png') no-repeat gray，但我无法连接颜色，因为图像具有垂直渐变。

我认为这是可以做到这一点使用CSS 3，我是对吗？

Answer 1

这是径向渐变。

body { 
    width: 600px; 
    height: 300px; 
    background-image: -o-radial-gradient(circle, #fff, #b1b5be 150px); 
    background-image: -moz-radial-gradient(circle, #fff, #b1b5be 150px); 
    background-image: -webkit-radial-gradient(circle, #fff, #b1b5be 150px); 
    background-repeat: no-repeat; 
} 

现场演示：Tinkerbin

Answer 2

您也可以通过CSS滤镜模糊的白色圆圈图像格创建白色圆形阴影。

的Webkit： -webkit-filter: blur(15px);

IE：filter: blur(Add=1, Direction=1, Strength=15)

在Firefox中使用SVG滤镜通过CSS