你對DIV圓角的實現(xiàn)是否了解，這里和大家分享一下簡易實現(xiàn)DIV圓角的JavaScript代碼，用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現(xiàn)圓形個性DIV。

簡易實現(xiàn)DIV圓角的JavaScript代碼

這個程序是個用來制作DIV圓角的開源javascript代碼實現(xiàn),效果和圖像制作圓角一樣的.它簡單,易用,不用修改任何圖像就能做到不同半徑圓角。用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現(xiàn)圓形個性DIV。

用法說明:

以下說明將以一個半徑為20像素圓角的DIV為例.

◆解壓您下載的文件,上傳到您的站點。然后復(fù)制代碼如下和黏貼它入您的網(wǎng)頁的頂頭部分。如果您保存了文件到該網(wǎng)頁目錄外

的任何地方,修正代碼中的src值.

代碼:

<scripttypescripttype="text/javascript"src="rounded_corners.js"> 
 

◆然后創(chuàng)造一個DIV。如果您已有DIV使用圓角,只要給這個DIV一個id就可以.

代碼:

<DIVidDIVid="myDiv"> 
 

◆***我們需要添加一段javascript來預(yù)載。在您的網(wǎng)頁的頂頭部分增加一些代碼。

其中,radius表示半徑,數(shù)值越大,圓角就越大.

◆運行

如果你想搞成奇形怪狀的圓角,你可以設(shè)置每個角都不同的半徑.

例如:

以下是引用片段：

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=右下角
 

【編輯推薦】

1. CSS樣式實時切換技巧剖析
2. CSS中margin邊界疊加問題及解決方案
3. CSS樣式表高效使用八大秘訣
4. 創(chuàng)建和插入CSS樣式表秘笈
5. 實現(xiàn)CSS垂直居中的五大方法及優(yōu)缺點