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

Question

我正在尝试使用纯css3实现这种阴影效果：

我很快就在Photoshop中模拟了这个效果。我想要的是那种弯曲的阴影效果。我知道可以获得直线阴影效果，但我试图在Google上搜索却不知道该如何称呼那种弯曲的阴影效果。我找不到任何地方说这是不可能的，也找不到任何地方说这是可能的。

如果无法使用CSS3，则愿意使用jQuery。

非常感谢您的任何帮助。

编辑：我通过纯CSS3实现的最接近任何阴影效果的方法是这样的：http://jsfiddle.net/tVt4w/

- LocustHorde

---

是的，这是可能的。请参考以下链接：http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ http://www.matthamm.com/box-shadow-curl.html 您可以轻松地调整这些技术来制作您所展示的阴影，尽管我个人认为您的有点过分了。但完全可以做到。 - Lea Verou

嗨，Lea，我正在制作个人作品集，所以有点过头也没关系，对吧？ - LocustHorde

我不这么认为，抱歉。好的设计是微妙的。 - Lea Verou

Answer 1

起初我认为这是不可能的。然后我找到了这个页面，其中展示了一些纯CSS漂亮的阴影效果。

很棒。

可以查看演示页面来了解可以实现的效果。

- Stephane Gosselin

---

不错。当然，这在IE中都不起作用（包括9）。唉。 - Karmic Coder

但在IE中无法正常工作。 - AR.

嘿，只是好奇一下，你有没有在IE上搞定什么东西？ - Stephane Gosselin

@stefgosselin，它在IE9上没有问题，但在其他任何浏览器（IE）中都无法正常工作。因此，我仍在寻找解决方案，如果我的客户说（他使用Chrome）可以的话，那么我就不会再费心了，但我仍在研究它。 - LocustHorde

哦，我确实找到了一篇关于在IE8中使事情正常工作的帖子（它有很多“ms-fitler”和一些荒谬的选项）。 - LocustHorde

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>

- unidentified-1

---

不好意思，如果你使用了图片，那就不是“仅限HTML和CSS”了，对吧？ - LocustHorde

自从1993年图像成为HTML的第一个实现的一部分以来，我不同意这个说法。图像比CSS本身更基础。虽然这相当简化了，但如果您的目标是纯核心兼容性，那么最好的选择是放弃CSS，回到表格中，并在图像或框下面的表格单元格中插入一个阴影图像。 - unidentified-1