CSS3 Page Shadow

Question

我想創建一個帶有左右陰影而不是底部陰影的內容包裝。這就是我要做的事情：http://community.mybb.com/注意到陰影（儘管這使用圖像，而不是css）。

用CSS做這件事的最好方法是什麼？

Answer 1

最好的辦法是使用圖像與舊版瀏覽器兼容。對於CSS，您將使用box-shadow，但IE9是第一款支持box-shadow的IE。

這就是說，如果你想使用CSS，你需要使用兩個盒子陰影屬性。你需要做兩個。

看看http://css-tricks.com/snippets/css/css-box-shadow/ 此外發電機在http://css3generator.com/

這裏是做什麼

<div id="leftBorder"> 
    <div id="rightBorder"> 
    <div id="content">Content here</div> 
    </div> 
</div> 

#leftBorder { 
-webkit-box-shadow: -10px 0px 5px 0px #999999; 
-moz-box-shadow: -10px 0px 5px 0px #999999; 
box-shadow: -10px 0px 5px 0px #999999; 
} 
#rightBorder { 
-webkit-box-shadow: 10px 0px 5px 0px #999999; 
-moz-box-shadow: 10px 0px 5px 0px #999999; 
box-shadow: 10px 0px 5px 0px #999999; 
} 

或者你有可能只設置邊框屬性單獨有點模糊的想法也不會給你好看的模糊陰影。

在IE9下面支持可能很困難，你可能需要反正扔一些圖片。舊的A List Apart文章解釋瞭如何做到這一點，但這並不美觀。

http://www.alistapart.com/articles/cssdrop2/