jquery.corner.js 插件，我无法让它在图像上工作答案

【问题标题】：jquery.corner.js plugin, I can't get it to work on imagesjquery.corner.js 插件，我无法让它在图像上工作
【发布时间】：2013-02-24 20:52:05
【问题描述】：

我有 jquery 的代码 corect 来制作圆角。我只用背景颜色对其进行了测试，它工作正常。

但是，我想将角应用于图像。它对我不起作用！

我创建了一个示例页面，其中我有该类的图像，就在具有相同类但只有背景颜色的 div 旁边。图像不起作用，但彩色“框”可以。

我尝试了三种不同的方式对其进行编码，但仍然无法正常工作。（我不需要所有三种编码方式都可以工作......只要一种就可以了！;'D）

这是我的小提琴链接：http://jsfiddle.net/SunnyOz/g46Gx/

这里是在线测试页面：http://www.webau.net/TC/example/corner_test.htm

这里是 CSS：

* {
    border: 0 none;
  }

.content {
    width: 900px;
    background-color: #fff; 
    margin: 0 auto;
}

.innertube {
    padding: 20px;
}

.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }

.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }

这是 HTML：

<div class="content">

  <div class="innertube">

    <br clear="all" />
    <br clear="all" />

    <img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

    <div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div> &nbsp;&nbsp;&nbsp; 
    <div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

    <img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

  </div>
</div>

这是内部 Javascript 代码：

$(document).ready(function(){
     $(".roundimg").corner("tl 50px").corner("br 50px");
     $(".imgBox").corner("15px");
     $('.divToHaveCorners').corner();
});

我的外部 JS 引用是：

<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>

我假设我遗漏了一些非常简单的东西......但我就是看不到它。任何帮助将不胜感激。

谢谢， SunnyOz

【问题讨论】：

标签： image jquery-plugins rounded-corners

【解决方案1】：

这样做，但也有很多插件可以让这些东西更容易使用，比如imgr。另外，使用this 作为参考可能对您很有帮助。干杯！

<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
    $(document).ready(function(){
        $("#imgBox").corner("15px");
        $("#imgBoxPlain").corner("15px");
    });
</script>
</head>
<body>
<div class="content">
  <div class="innertube">
    <div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
    <div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
  </div>
</div>

</body>
</html>

【讨论】：