gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:47:36 26 4
gpt4 key购买 nike

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

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

最佳答案

正如@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% 的透明度。

关于css - 容器侧面的光影 (CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11724581/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com