讓div出現，好像底部的左右角正在使用盒子陰影離開頁面一點點？

Question

有沒有人知道如何做到這一點的教程，或沒有人有一個小例子？

例如：http://hazelmade.com/projects.html

Answer 1

的這個CSS drop-shadows without images演示頁面上的'舉起角落'示例顯示可以不使用圖像。它依賴於CSS3支持，特別是box-shadow和transform，但這是純粹的CSS解決方案。

該技術的全部細節可以是Nicolas Gallagher的found in the main article。

Answer 2

在該網站上的陰影是適合於這些元件的特定寬度的定製圖像。

如果你想追隨類似的技術，他們做到了，你可以只添加絕對定位的股利以下的兒童形象...

的jsfiddle例如：http://jsfiddle.net/gbFNk/

HTML：

<div id="example"> 
    content here... 
    <img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" /> 
</div> 

CSS：

#example { 
    width:796px; //your tailor made shadow needs to be this long 
    height:100px; 
    position:relative; 
    background:grey; 
} 

#shadow { 
    position:absolute; 
    bottom:-15px; //this is the height of the custom image. 
} 

可替換地，如果y OU需要一個陰影一樣，有不同的寬度，你做2個陰影（每個角落），並做類似如下：

HTML：

<div id="example"> 
    content here... 
    <div id="dropshadow"> 
    <img class="left_shadow" src="leftshadow.png" /> 
    <img class="right_shadow" src="rightshadow.png" /> 
    <div style="clear:both"></div> 
    </div> 
</div> 

CSS：

#example { 
    width:796px; 
    height:100px; 
    position:relative; 
    background:grey; 
} 

#dropshadow { 
    width:796px; //needs to be the same width as the parent div 
    position:absolute; 
    bottom:-15px; //this still needs to be the height of the custom images. 
} 

#dropshadow img.left_shadow { 
    float:left; 
} 
#dropshadow img.right_shadow { 
    float:right; 
}