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

希望這對我很有幫助。