Floated divs：你可以放下它们吗？

Question

林创建一个网站，有内容的三列.....

1. 导航浮动：左;
2. 以内容为中心
3. 右栏浮标：右;

是否可以投影这三个区域的影子。

我试过了，它没有工作想知道如果divs禁止最终结果？

Answer 1

这样做有背景的各种方式阴影

1），得到背景网址作为DIV阴影图像，并给予一定的保证金左：5px的，这使得显示就像一个阴影。

2）获得像topright，right，bottomright，bottom image这样的四个图像，并在div之后逐一放置它们。

选择适合你的任何东西都应该是完美的。请参见下面的临客一些exampel http://www.alistapart.com/articles/cssdropshadows/

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

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

与萤火虫，你可以看到我们是如何实现的，它的第二种方法。

让我知道你是否有更多questoins。

Answer 2

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

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

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

然后应用盒子的影子，像这样（不要忘记浏览器前缀） 和我使用的RGBA所以我们得到设定阿尔法透明度好，但你可以使用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); 
} 

希望这对我很有帮助。