如何实现这个css3阴影效果？

Question

我试图看看是否有可能使用纯css3来实现这种阴影：

我很快在photoshop中嘲笑了这个。我正在寻找那种弯曲的阴影效果。我知道有可能获得straigt阴影效果。我试着看谷歌我甚至不知道该叫什么弯曲的阴影。我找不到任何说不可能的地方。无法找到任何可能的地方。

如果css3没有发生，我愿意使用jQuery。

任何帮助，非常感谢。 感谢。

编辑：我最接近使用css3获得任何阴影的是：http://jsfiddle.net/tVt4w/

Answer 1

起初我认为不可能。然后我发现this page显示了纯css中的一些不错的例子。

妙的。

请参阅demo page了解可以实现的目标。

Answer 2

仅限HTML和CSS

阴影会自动适应图像的宽度。

使用PNG图像，可以这样做：

（没有详尽的兼容性测试，但它适用于最新的FF，Safari和Chrome）

<style type="text/css" media="all">
.shadow {
    position:relative;
    width:auto;
    padding:0;
    margin:0;
}
.shadow:before,
.shadow:after {
    content:"";
    position:absolute; 
    z-index:-1;
}
.arch01:after {
    position:absolute;
    padding:0; margin:0;
    height:34px;
    width:100%;
    bottom:-30px;
    left:0px; right:0px;
    background-image: url('arch_01.png');
    background-size:100% 100%;
    background-position:left top;
}
</style>


<span class="shadow arch01">
    <img src="photo.jpg" width="500px" height="250px">
</span>