jQuery 網頁表格圓角

近在做網頁，想把表格的四個邊用成圓角，以往這個動作都需要用表格背景圖片來達成，不過我無意間接觸到 jQuery ，它其實就是以 JavaScript 為基礎所開發出來的函式庫，網路上有許多好用的 jQuery Plugin，而 CurvyCorners 可以做出網頁表格圓角的效果

jQuery Plugin 名稱：CurvyCorners
最新版本：2.0.4
軟體下載：http://www.curvycorners.net/downloads/


1. 首先解壓縮之後，載入 curvycorners.src.js

<script type="text/JavaScript" src="curvycorners.src.js"></script>

2. 再來設定表格的外觀

<style>
#myBox {
    margin: 0.5in auto;
    color: #666;
    width: 10%;
    padding: 20px;
    text-align: left;
    background-color: #FFC;
    border: 3px solid #000000;
}
</style>

3. 接下來設定每個邊框的角度，有四個邊可以設定，分別是
tl: { radius: 20 }
tr: { radius: 20 }
bl: { radius: 20 }
br: { radius: 20 }
只要經由改變後面的數字，便可以使圓角的度度變大或變小

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
  var settings = {
   tl: { radius: 20 },
   tr: { radius: 20 },
   bl: { radius: 20 },
   br: { radius: 20 },
   antiAlias: true
  }  
  curvyCorners(settings, "#myBox");
  }
</script>

4. 接下來在 HTML 的 Body 中，插入一個叫做 myBox 的 DIV

<div id="myBox">
 <p>test1</p>
 <p>test2</p>
 <p>test3</p>
</div>

最後的呈現結果就如下面所示

分享