圆角： ie6-8不支持的问题

相关文档：http://blog.chinaunix.net/uid-22414998-id-3180380.html
各种不同样式：http://www.zhangxinxu.com/study/201001/jquery-plugin-round-corner.html

ie9 以下的浏览器还不支持 border-radius 这个属性样式。不过可以引入jquery.corner.js 这个插件。在上面的链接里包含了多种不同的圆角样式。

实现ie圆角功能首先引入 jq , corner 插件，然后调用 corner 插件的 corner 方法即可

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.corner.js"></script>

<script type="text/javascript">

      $(function(){

          $("div").corner();

      });

</script>

1.最简单的圆角样式：

width:100px;
height:100px;
border-radius:10px;  ---->可以省略
$(function(){
        
    $("div").corner();
});
 
想要不同样式的角，其他样式不变，仅传给这个 corner 方法参数就可以了。
2.
 
 $(function(){
     
$(".box").corner('notch');
 });

3.

     
$(function(){
     
$(".box").corner('sharp');

 });

所有角所带的样式

有关圆角的其他参数
4.设置圆角的位置

$(function(){
   
$(".box").corner('top');
});

5.设置圆角的位置

$(function(){
   
$(".box").corner('top left');//
$(".box").corner('top-left');      并且的关系
});

6.设置圆角的值

$(function(){
   
$(".box").corner('top 40px');

});

7.混搭样式

$(function(){  
    $(".box").corner('top 40px').corner("sharp bottom 10px");
});

8.
<div class="div"><p></p></div>
.div{

    width:100px;

    height:100px;

    margin:30px;

    background-color:yellow;

}
p{

    display:block;

    height:60px;

    background-color:blue;
}

$("p").corner("sharp 18px").parent().css('padding','20px').corner("round 18px");

ie6/ie7:                                               ie8: