CSS框阴影不是真的透明吗？

Question

这是一堆8个白框阴影，底部有蓝色背景渐变，其他地方有白色背景。

按照我的逻辑，白色背景上的白色方框阴影应该会产生白色，但显然有一个灰色的边缘将白色div与白色背景的其余部分分开。生成它的css是：

.content, .sidebar, .banner{
   background-color: white;
   -webkit-box-shadow: 0px 0px 15px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
                       0px 0px 30px white,
}

当然，更少的盒子阴影，它不那么明显，但在纯白色背景上仍然非常明显。我的目的是希望白色内容区域坚持蓝色渐变，但白色发光阴影轻柔地“清除”内容区域周围的渐变区域，如此图所示

这张照片来自我用adobe烟花制作的模型;你可以看到白色的发光阴影完美融入白色背景，并且对底部渐变效果非常好。知道是什么导致我的CSS阴影（到目前为止只在chrome中测试）表现不好，或者我可以使用任何其他机制来实现我想要的效果吗？

Answer 1

不要在一个元素上使用8个不同的阴影，而是使用大尺寸的阴影扩展属性来获得所需的效果：

  box-shadow: 0px 0px 35px 20px #fff;

正如您所看到的in this demonstration，您只需要一个阴影，第四个属性20px可让您将阴影从元素边缘进一步展开，从而创建柔和的发光效果。玩设置以获得您想要的东西。

此外，为了更好地重新创建屏幕截图中的效果，您可以使用opacity: 0.5;进一步软化效果。参见演示。

希望有所帮助：）