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;

正如您在本演示中所看到的,您只需要一个阴影,第四个属性20px使您可以将阴影从元素边缘进一步展开,从而创建柔和的发光效果.玩设置,以获得您想要的.

此外,为了更好地重新创建屏幕截图中的效果,您可以使用opacity: 0.5;它来进一步软化它.看演示.

希望有帮助:)