css - 浮动 div：你可以给它们留下阴影吗？

Question

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

1. 导航浮动：左；
2. 以主要内容为中心
3. 右列浮动：右；

是否可以对所有这三个区域进行投影。

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

Answer 1

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

就像这样简单地定位容器的所有三个选择器。

.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);
}

希望这会有所帮助。

Answer 2

有多种方法可以制作背景阴影

1) 将背景 url 作为 div 的阴影图像，并给出一些 margin-left:5px ，这使得显示像一个阴影。

2）得到四个图像，如右上，右下，右下，底部图像，并在div之后将它们一一定位。

选择任何对你来说容易的东西，它应该完美无缺。请参阅以下链接以获取一些示例 http://www.alistapart.com/articles/cssdropshadows/

我们在以下位置为图像实现了阴影

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

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

如果您有更多问题，请告诉我。