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提供了一些有关浏览器如何计算阴影的重要信息。特别是：

您可以使用备用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透明度（不透明度）。例如，.5表示透明度为50％。

容器两侧的光影（CSS）

1 个答案: