CSS盒子阴影不是真正透明的吗？答案

【问题标题】：CSS box shadow not truly transparent?CSS盒子阴影不是真正透明的吗？
【发布时间】：2011-10-29 18:07:34
【问题描述】：

这是一叠 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 中测试）表现不佳，或者我可以使用任何其他机制来实现我想要的效果吗？

【问题讨论】：

标签： html css

【解决方案1】：

不要在一个元素上使用8种不同的阴影，而是使用大尺寸的shadow spread属性来获得你想要的效果：

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

如您所见in this demonstration，您只需要一个阴影，而第四个属性20px 使您可以将阴影从元素边缘向外扩散，从而创建柔和的发光效果。使用设置来获得您想要的。

另外，为了更好地重新创建您在屏幕截图中的效果，您可以使用opacity: 0.5; 使其更加柔和。查看演示。

希望有帮助:)

【讨论】：

这行得通，或多或少是我想要的，但你知道为什么堆叠的白色阴影会变成灰色吗？
我完全不知道。但它并不是真正为人们设计的堆叠 8 个阴影 :) 很高兴它有帮助 :)