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(setting...