你對DIV圓角的實現是否了解，這裡和大家分享一下簡易實現DIV圓角的JavaScript代碼，用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現圓形個性DIV。
簡易實現DIV圓角的JavaScript代碼
這個程序是個用來制作DIV圓角的開源Javascript代碼實現,效果和圖像制作圓角一樣的.它簡單,易用,不用修改任何圖像就能做到不同半徑圓角。用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現圓形個性DIV。
用法說明:
以下說明將以一個半徑為20像素圓角的DIV為例.
◆解壓您下載的文件,上傳到您的站點。然後復制代碼如下和黏貼它入您的網頁的頂頭部分。如果您保存了文件到該網頁目錄外
的任何地方,修正代碼中的src值.
代碼:
- <scripttypescripttype="text/Javascript"src="rounded_corners.JS">
◆然後創造一個DIV。如果您已有DIV使用圓角,只要給這個DIV一個id就可以.
代碼:
- <DIVidDIVid="myDiv">
◆最後我們需要添加一段Javascript來預載。在您的網頁的頂頭部分增加一些代碼。
其中,radius表示半徑,數值越大,圓角就越大.
◆運行
如果你想搞成奇形怪狀的圓角,你可以設置每個角都不同的半徑.
例如:
以下是引用片段：
- settings={
- tl:{radius:20},
- tr:{radius:40},
- bl:{radius:60},
- br:{radius:80},
- antiAlias:true,
- autoPad:false
- }
或者:
- settings={
- tl:{radius:20},
- tr:false,
- bl:false,
- br:{radius:80},
- antiAlias:true,
- autoPad:false
- }
提示:tl-左上角tr=右上角bl=左下角br=右下角
【編輯推薦】