0

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

到目前为止，我实现了我的目标，但还没有完全实现，这意味着我两边都有阴影，但它太暗了。我希望我的影子更轻（类似于 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;
}
4

1 回答 1

0

正如@Vlad Saling 指出的那样，css3 支持多种 box-shadow 选项。

这个网站有一些关于浏览器如何计算阴影的重要信息。尤其是：

您可以使用备用 rgba([red], [green], [blue], [alpha]) 语法在 CSS 中指定颜色。RGB 值以十进制 (0-255) 写入，最后一个属性是“alpha”（即不透明度），一个从 0（透明）到 1（不透明）的十进制数。0.5 alpha 给你 50% 透明的东西。所以 rgba(0, 0, 0, 0.25) 给你一个很好的褪色黑色阴影，它保持足够暗，即使在深灰色上也很明显。

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

-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 透明度（不透明度）。例如，0.5 表示 50% 的透明度。

于 2012-07-30T16:27:24.090 回答