html - 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,
}

自然，框阴影越少，它就越不明显，但在纯白色背景上仍然非常明显。这样做的目的是我希望白色内容区域粘在蓝色渐变中，但是白色发光阴影轻轻地“清除”内容区域周围的渐变区域，如图所示

这张图片来 self 使用 adobe 烟花制作的模型；你可以看到白色发光阴影完美地融入了白色背景，并且与底部渐变相得益彰。知道是什么导致我的 CSS 投影(到目前为止仅在 chrome 中测试)表现不佳，或者我可以使用任何其他机制来实现我想要的效果吗？

Answer 1

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

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

如你所见in this demonstration ，您只需要一个阴影，第四个属性 20px 使您能够将阴影从元素的边缘进一步扩展，从而创建柔和的发光效果。玩转设置以获得您想要的。

此外，为了更好地重现屏幕截图中的效果，您可以使用 opacity: 0.5; 来进一步柔化效果。查看演示。

希望对您有所帮助:)