Question

我正在创建一个包含三列内容的网站.....

navigation float：left;
主要内容集中在
右栏浮动：右;

是否可以在所有这三个区域投下阴影。

我试过了，并不知道div是否禁止最终结果？

Answer 1

有多种方法可以进行背景阴影

1）给背景网址作为div的投影图像并给出一些边距：5px，使得显示像投影。

2）获得四个图像，如顶部，右侧，底部，底部图像，并在div之后逐个放置它们。

选择任何容易的东西，它应该是完美的。有关示例，请参阅下面的linke http://www.alistapart.com/articles/cssdropshadows/

我们在图片的以下位置实施了阴影

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263

使用firebug，您可以看到我们如何实施，这是第二种方法。

如果你有更多的任务，请告诉我。

Answer 2

当然，您可以同时对所有这些应用投影，如果您使用此处列出的浏览器支持http://caniuse.com/css-boxshadow，那么只需使用CSS3框阴影就可以使用一个解决方案。

只需简单地定位容器的所有三个选择器。



.container-left, .container-middle, .container-right { }

.container-left, .container-middle, .container-right { } 然后像这样应用框阴影（不要忘记浏览器前缀）我正在使用RGBA，所以我们也可以设置Alpha透明度，但你也可以使用HSLA。

.container-left, .container-middle, .container-right {
    -webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
    -moz-box-shadow:    0 0 9px rgba(20, 0, 0, 0.53);
    box-shadow:         0 0 9px rgba(20, 0, 0, 0.53);
}

希望这有用。

漂浮的divs：你能掉下阴影吗？

2 个答案: