使用jQuery的插件jquery.corner.js来实现圆角效果-详解
jquery.corner.js可以实现各种块级元素的角效果，以下为演示，详见jquery_corner.html中的注释部分，并附百度盘下载
jquery_corner.html代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery-corner圆角</title> 7 <style> 8 .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;} 9 .box14,.box15,.box16{width: 100px; height: 100px;margin:20px;line-height: 100px; text-align: center;position:relative; float: left; background: #fc7677} 10 </style> 11 <script src="jquery.js"></script> 12 <script src="jquery.corner.js"></script> 13 </head> 14 <body> 15 <div class="box1">四角</div> 16 <div class="box2">顶部两角</div> 17 <div class="box3">左侧两角</div> 18 <div class="box4">右侧两角</div> 19 <div class="box5">底部两角</div> 20 <div class="box6">顶部和左侧</div> 21 <div class="box7">底部和左侧</div> 22 <div class="box8">顶部和右侧</div> 23 <div class="box9">底部和右侧</div> 24 <div class="box10">左上角</div> 25 <div class="box11">右上角</div> 26 <div class="box12">左下角</div> 27 <div class="box13">右下角</div> 28 <div class="box14">四角为方角</div> 29 <div class="box15">右下角为方角</div> 30 <div class="box16">上方角下圆角</div> 31 <script> 32 $(".box1").corner("10px");//默认是四个角 33 $(".box2").corner("top 10px");//顶部的两个角(左上角和右上角) 34 $(".box3").corner("left 10px");//左侧的两个角(左上角和左下角) 35 $(".box4").corner("right 10px");//右侧的两个角(右上角和右下角) 36 $(".box5").corner("bottom 10px");//底部的两个角(左下角和右下角) 37 $(".box6").corner("top-left 10px");//top-left，顶部和左侧，一共是三个角 38 $(".box7").corner("bottom-left 10px");//bottom-left，底部和左侧，一共是三个角 39 $(".box8").corner("top-right 10px");//top-right，顶部和右侧，一共是三个角 40 $(".box9").corner("bottom-right 10px");//bottom-right，底部和右侧，一共是三个角 41 $(".box10").corner("tl 10px");//top and left=>tl，顶部和左侧的一个角，左上角 42 $(".box11").corner("tr 10px");//top and right=>tr，顶部和右侧的一个角，右上角 43 $(".box12").corner("bl 10px");//bottom and left=>bl，底部和左侧的一个角，左下角 44 $(".box13").corner("br 10px");//bottom and right=>br，底部和右侧的一个角，右下角 45 $(".box14").corner("bevel 10px");//四角为方角，此方法必须要有背景色，且色值为RGB格式(否则不兼容) 46 $(".box15").corner("bevel br 10px");//右下角为方角，此方法必须要有背景色，且色值为RGB格式 47 $(".box16").corner("bevel top 10px").corner("round bottom 10px"); 48 //顶部为方角，底部为圆角，此方法必须要有背景色，且色值为RGB格式 49 //注：以上方法适合块级元素使用，如：div p等标签， 50 //建议实际使用时，在要实现角效果的div标签外再加一层div 51 //其他角效果见JQuery Corner Demo.mhtml，用非IE浏览器打开查看。 52 </script> 53 </body> 54 </html>
以下为效果图：
源码和jquery.corner.js和jquery.js及JQuery Corner Demo.mhtml百度网盘下载
提取码：3zwz
