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

这是一个由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 fireworks制作的模型；您可以看到白色辉光阴影完美地融入到白色背景中，并且在底部渐变中效果也非常好。知道是什么导致我的CSS放置阴影（目前仅在chrome中测试）表现不好，或者我可以使用任何其他机制来实现我想要的效果吗？

与其在一个元素上使用8个不同的阴影，不如使用大尺寸的阴影扩展属性来获得你想要的效果：

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

如您所见，您只需要一个阴影，第四个属性

20px

使您能够将阴影从元素边缘进一步展开，从而创建柔和的辉光效果。使用这些设置可以得到你想要的

此外，为了更好地重新创建屏幕截图中的效果，您可以使用

opacity:0.5使其更加柔和。请看演示

希望这能有所帮助：）
这很管用，或多或少符合我的要求，但你知道为什么白色阴影会变成灰色吗？我完全不知道。但它并不是专门为人们设计的，可以叠加8个阴影：）很高兴它有帮助：）