在div问题里面的curvycorners图像

Question

我正在使用jquery弯曲的角落。我知道另一个名为jquery corner的插件可用，但是它的文件大小比弯曲的角大，我决定使用弯曲的角落。

我有一个标记：

<div class="roundedBox" style="border-width: 4px; margin-left: 10px; margin-right: 10px;
margin-top: 10px; margin-bottom: 10px; border: solid 4px #008FD9;">
    <asp:Image Width="140"  ID="innerImg" runat="server" style="overflow:hidden;" />
</div>

然后在js中我做：

 curvyCorners.addEvent(window, 'load', initCorners);
        function initCorners() {
              var settings = {
              tl: { radius: 20 },
              tr: { radius: 20 },
              bl: { radius: 20 },
              br: { radius: 20 },
              antiAlias: true
             };
             curvyCorners(settings, ".roundedBox");
         }

问题是我的图像重叠在div之上，看起来非常难看。我该如何解决这个问题？

附图是显示问题的图像：

Answer 1

我不确定该插件是如何工作的，但似乎你需要像处理div一样对图像应用相同的样式。

仅考虑半径16来考虑图像边框。

Answer 2

尝试在overflow:hidden CSS类中添加.roundedBox。

Answer 3

我不熟悉弯曲的角落，但我的直觉说这是一个z-index问题。

Answer 4

curvyCorners不支持图片元素：

元素无法使用curvyCorners进行舍入。相反，使用元素并将图像设置为。

的背景图像

curvyCorners

我自己对这个插件有很多问题，我不得不完全摆脱它，而是使用了malsup圆角。