使用CSS / JS / jQuery弯曲图像效果？

Question

我正试图在我的网站上设置图像的样式，在图像的弯曲部分下方有一个轻微的弯曲效果和阴影 - 就像这样（在易趣上看到）：

有人知道如何实现吗？任何建议的jQuery或java脚本库？或者只用CSS可以实现吗？

Answer 1

我对slash197的答案进行了修改。它看起来与图片完全相同，至少在Firefox中如此。然而，它非常大，需要额外的标记。

我将图像容器div（大部分代码由slash197）放在另一个div中。然后我添加了另一个div并给它一个阴影，然后我只是正确定位它。

<强> HTML：

<div class="container">
    <div class="shadow">&nbsp;</div>
    <div class="img-container">
        <img src="http://your.server.com/path/to/your/image.jpg" />
    </div>
</div>

<强> CSS：

.container {
    position: relative;
    display: inline-block; /* or block */
    margin: 20px; /* not required */
}
.img-container {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    display: inline-block;
    background: white;
    position: relative;
    top: 0;
    left: 0;
}
.shadow {
    box-shadow: 0 20px 5px 5px #cccccc; /* adjust color, blur or spread if you want */
    transform: skewy(-3deg);
    position: absolute;
    left: 8px;
    bottom: 22px; /* adjust this to change the shadow's size */
    height: 20px;
    width: 100px;
}

这里有它的荣耀：http://jsfiddle.net/VCEJB/1/

编辑：将rotate更改为skewy，因为它可能看起来稍微好一些。

Answer 2

仅限CSS非常简单：将图像放入容器中，使用填充，边框，边框半径和框阴影设置该容器的样式。

框阴影将为您提供与示例中的阴影不同的阴影，但它可能足够您，因此您不需要外部库。像这样http://jsfiddle.net/k7Kpv/2/

div {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    box-shadow: 4px 5px 12px -3px #cccccc;
    display: inline-block;
}