圈子与阴影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过滤器使用白色圆圈图像模糊div来创建白色圆圈阴影。

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

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

在Firefox中通过CSS使用SVG过滤器