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

Question

我想有轻微的弯曲效果和图像的弯曲部分下方的阴影样式在我的网站上的图片 - 就像这样（看到EBAY）：

是否有人知道如何实现？任何建议的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; 
}