CSS盒子阴影不是真的透明吗？ [英] CSS box shadow not truly transparent?

问题描述

>

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

This is a stack of 8 white box shadows, with a blue background gradient at the bottom and a white background elsewhere.

根据我的逻辑，白色背景上的白框阴影应该在白色，但显然有一个灰色的轮圈分割白色的div和白色背景的其余部分。生成这个的css是：

By my logic a white box shadow on a white background should result in white, but there is clearly a greyish rim dividing the white div from the rest of the white background. The css that generates this is:

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

当然，箱阴影较少，但不太明显，白色背景。这个的目的是我想要白色内容区域坚持蓝色渐变，但与白色发光阴影轻轻地清除在内容区域周围的梯度区域，如此图像所示

Naturally, fewer box shadows, it is much less pronounced, but still very noticable on a pure white background. The purpose of this is I want the white content area to stick into the blue gradient, but with the white glow shadow softly "clearing" an area of gradient around the content areas, as is shown in this image

>

这张图片来自我使用adobe烟花制作的模型;你可以看到白色的辉光阴影完美地融合到白色背景，也工作非常好，对底部的梯度。任何想法是什么导致我的CSS阴影（到目前为止只有在Chrome中测试）行为不好，或任何其他机制，我可以用来实现我想要的效果。

This image was from my mockup made using adobe fireworks; you can see the white glow-shadow blends into the white background perfectly, and also works very nicely against the bottom gradient. Any idea what is causing my CSS drop shadows (so far only tested in chrome) to behave badly, or any other mechanism I can use to achieve the effect I want?

推荐答案

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

Instead of using 8 different shadows on one element, use the shadow spread property with a large size to get the effect you desire:

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

正如你可以看到在这个演示，你只需要一个阴影和第四个属性 20px 使您能够从元素的边缘进一步扩展阴影，创造柔和的发光效果。

As you can see in this demonstration, you only need one shadow and the fourth property 20px enables you to spread the shadow out further from the edge of the element, creating the soft glow effect. Play with the settings to get what you desire.

此外，为了更好地重新创建您在屏幕截图中的效果，您可以使用不透明度：0.5; 更软化它。请参阅演示。

Also, to better re-create the effect you have in your screenshot, you can use opacity: 0.5; to soften it even more. See the demo.

希望有助于：）

这篇关于CSS盒子阴影不是真的透明吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！