下拉陰影具有梯度的CSS

Question

我在使用HTML和CSS的項目上工作，我想複製類似於此站點上使用的內容。

http://slb.com/hse/hse_policy.aspx

環繞四周頂部的div容器以及更重要的是你怎麼上的陰影漸變，因此淡出對底部的陰影？我知道如何得到實際的投影。

乾杯

Answer 1

沒有這樣做純CSS的方法。您鏈接的網站使用大圖像來做到這一點：http://slb.com/images/gradient_1120.jpg - 您需要做類似的事情才能獲得相同的效果。

Answer 2

那麼，顯然他們使用背景圖像（http://slb.com/images/gradient_1120.jpg）。但是你也可以在body前添加一些元素（可以是僞元素），並給它們一個漸變作爲背景。

#bg-element-left { 
    /* background-gradient from top right to bottom left */ 
} 

#main content { 
    /* styled as you wish */ 
} 

#bg-element-right { 
    /* background-gradient from top left to bottom right */ 
}