圆角： 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 方法即可

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
2. <script type="text/javascript" src="js/jquery.corner.js"></script>
   
3. <script type="text/javascript">
   
4.       $(function(){
   
5.           $("div").corner();
   
6. 
   
7.       });
   
8. </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: 100 px;
    height: 100 px;
    margin: 30 px;
    background-color: yellow;
}
p{
    display: block;
    height: 60 px;
    background-color: blue;

}

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

ie6/ie7:                                               ie8: