使用jQuery的外掛jquery.corner.js來實現圓角效果-詳解
阿新 • • 發佈：2020-02-22
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百度網盤下載
提取碼：