使用jQuery的插件jquery.corner.js来实现圆角效果-详解

jquery.corner.js可以实现各种块级元素的角效果，以下为演示，详见jquery_corner.html中的注释部分，并附百度盘下载

jquery_corner.html代码如下：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>jQuery-corner圆角</title>
     <style>
         .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10,.box11,.box12,.box13,.box14{width: 100px; height: 100px;border:1px solid #fc7677;margin:20px;line-height: 100px; text-align: center;position:relative; float: left;}
         .box14,.box15,.box16{width: 100px; height: 100px;margin:20px;line-height: 100px; text-align: center;position:relative; float: left; background: #fc7677}
     </style>
     <script src="jquery.js"></script>
     <script src="jquery.corner.js"></script>
 </head>
 <body>
     <div class="box1">四角</div>
     <div class="box2">顶部两角</div>
     <div class="box3">左侧两角</div>
     <div class="box4">右侧两角</div>
     <div class="box5">底部两角</div>
     <div class="box6">顶部和左侧</div>
     <div class="box7">底部和左侧</div>
     <div class="box8">顶部和右侧</div>
     <div class="box9">底部和右侧</div>
     <div class="box10">左上角</div>
     <div class="box11">右上角</div>
     <div class="box12">左下角</div>
     <div class="box13">右下角</div>
     <div class="box14">四角为方角</div>
     <div class="box15">右下角为方角</div>
     <div class="box16">上方角下圆角</div>
     <script>
         $(".box1").corner("10px");//默认是四个角
         $(".box2").corner("top 10px");//顶部的两个角(左上角和右上角)
         $(".box3").corner("left 10px");//左侧的两个角(左上角和左下角)
         $(".box4").corner("right 10px");//右侧的两个角(右上角和右下角)
         $(".box5").corner("bottom 10px");//底部的两个角(左下角和右下角)
         $(".box6").corner("top-left 10px");//top-left，顶部和左侧，一共是三个角
         $(".box7").corner("bottom-left 10px");//bottom-left，底部和左侧，一共是三个角
         $(".box8").corner("top-right 10px");//top-right，顶部和右侧，一共是三个角
         $(".box9").corner("bottom-right 10px");//bottom-right，底部和右侧，一共是三个角
         $(".box10").corner("tl 10px");//top and left=>tl，顶部和左侧的一个角，左上角
         $(".box11").corner("tr 10px");//top and right=>tr，顶部和右侧的一个角，右上角
         $(".box12").corner("bl 10px");//bottom and left=>bl，底部和左侧的一个角，左下角
         $(".box13").corner("br 10px");//bottom and right=>br，底部和右侧的一个角，右下角
         $(".box14").corner("bevel 10px");//四角为方角，此方法必须要有背景色，且色值为RGB格式(否则不兼容)
         $(".box15").corner("bevel br 10px");//右下角为方角，此方法必须要有背景色，且色值为RGB格式
         $(".box16").corner("bevel top 10px").corner("round bottom 10px");
         //顶部为方角，底部为圆角，此方法必须要有背景色，且色值为RGB格式
         //注：以上方法适合块级元素使用，如：div p等标签，
         //建议实际使用时，在要实现角效果的div标签外再加一层div
         //其他角效果见JQuery Corner Demo.mhtml，用非IE浏览器打开查看。
     </script>
 </body>
 </html>

以下为效果图：

源码和jquery.corner.js和jquery.js及JQuery Corner Demo.mhtml百度网盘下载

提取码：3zwz