css - 容器侧面的光影 (CSS)

Question

我一直在尝试构建一个主容器左右两侧都有棕色阴影的站点。

到目前为止，我实现了我的目标，但还没有完全实现，这意味着我在两边都有阴影，但太暗了。我希望我的影子更亮(类似于 Bloomingdales.com 网站)。

这是我的CSS代码，有什么建议吗？

谢谢!

.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
}

Answer 1

正如@Vlad Saling 指出的那样，css3 支持多种框阴影选项。

This Website有一些关于浏览器如何计算阴影的重要信息。特别是:

You can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.

要解决您的问题，请将颜色更改为较浅的棕色阴影，或者通过使用 rgba 而不是 hex 声明其颜色来调整您的框阴影属性以包含 alpha channel :

-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x),  -1px 0 2px rgba(28, 14, 3, x);   
box-shadow: 4px 0 2px  rgba(28, 14, 3, x),  -4px 0 2px rgba(28, 14, 3, x);

应该可以。将 x 替换为您想要的 alpha 透明度(不透明度)。例如，.5 表示 50% 的透明度。