如何使用 css 或 jquery 创建弯曲的图像（见图）

【问题标题】：How to create image curved using css or jquery (See picture)如何使用 css 或 jquery 创建弯曲的图像（见图）
【发布时间】：2013-11-21 05:03:41
【问题描述】：

你知道如何实现这样的效果吗：Image

当鼠标悬停在图片上时？

我一直在搜索 css 和 jquery，但仍然没有达到我所需要的。

请给我一个解决方案。

非常感谢！

（对不起我的英语）

【问题讨论】：

标签： javascript jquery css effect

【解决方案1】：

您可以使用 CSS 边框半径属性并将其应用于悬停，例如类似：

#img:hover {
    border-top-right-radius:50% 10%;
    border-top-left-radius:50% 10%;
    border-bottom-right-radius:50% 10%;
    border-bottom-left-radius:50% 10%
}

演示：http://jsfiddle.net/r3KzP/1/

【讨论】：

非常感谢。对我来说，这可能是迄今为止最好的解决方案。感谢您的精彩提示。
不客气。如果您需要拉伸图像（例如在您的示例中），只需将 width 和 height 属性添加到上述 CSS 以获得额外效果。
是的，我明白了。再次感谢：D