使用方框阴影使div看起来好像左下角和右下角稍微脱离页面

Question

有人知道如何做到这一点的教程吗，或者有人有一个小例子吗?

示例:http://hazelmade.com/projects.html

Answer 1

在这个没有图像的CSS下拉阴影演示页面上的'提升角'示例显示了不使用图像也是可能的。它依赖于CSS3的支持，特别是box-shadow和transform，但这是期望从一个纯CSS解决方案。

该技术的全部细节可以在Nicolas Gallagher的主文章中找到。

Answer 2

该站点的阴影是根据这些元素的特定宽度定制的图像。

如果你想遵循类似的技术，你可以添加一个绝对位于div下面的子图像…

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.
}

或者，如果你需要一个宽度不同的投影，你可以创建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;
}