1

我有 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

4

1 回答 1

1

这样做了，但是还有大量的插件可以让这些东西更容易使用，比如imgr。另外-将此作为参考可能对您很有帮助。干杯!

<!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>
于 2013-03-09T20:14:27.813 回答