CSS+DIV實現圓角表格的三種方法

作者：admin 2010-08-26 16:19:41

CSS+DIV網頁布局有很多值得學習的地方，本文向大家簡單介紹一下CSS+DIV實現圓角表格的三種方法，希望對你的學習有所幫助。

本文和大家重點討論一下CSS+DIV實現圓角表格的三種方法，相信本文介紹一定會讓你有所收獲。

CSS+DIV實現圓角表格的三種方法

很多網頁上都有圓角表格，讓人看起來非常舒服。今天向大家講解CSS+DIV實現圓角表格的三種方法。

方法一：網上流傳最多的DIV圓角方式，完整代碼如下；

<html> 
<head> 
<title>CSS實現DIV圓角的三種方法</title> 
<metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"> 
<styletypestyletype="text/css"> 
<!--  
body{color:#fff;}  
div.RoundedCorner{background:black}  
b.R_top,b.R_bottom{display:block;background:#FFFFFF}  
b.R_topb,b.R_bottomb{display:block;height:1px;overflow:hidden;background:black}  
b.R_1{margin:05px}  
b.R_2{margin:03px}  
b.R_3{margin:02px}  
b.R_topb.R_4,b.R_bottomb.R_4{margin:01px;height:2px}  
--> 
</style> 
</head> 
<body> 
<divclassdivclass="RoundedCorner"> 
<bclassbclass="R_top"> 
<bclassbclass="R_1"></b> 
<bclassbclass="R_2"></b> 
<bclassbclass="R_3"></b> 
<bclassbclass="R_4"></b> 
</b> 
<p>圓角DIV內容</p> 
<bclassbclass="R_bottom"> 
<bclassbclass="R_4"></b> 
<bclassbclass="R_3"></b> 
<bclassbclass="R_2"></b> 
<bclassbclass="R_1"></b> 
</b> 
</div> 
</body> 
</html>

總結：此方法靈活性較好，但調用麻煩，每次調用，DIV前后都需要加上如此多的代碼，而且圓角的半徑不好調。

方法二：使用background-image方法，使DIV出現圓角背景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；

示例：

div{background:url(圖片url)no-repeat;}

總結：此方法適合用于特別位置，調用方法最簡單，但靈活性不夠好。要改變表格大小，必須重新做圓角背景圖片。

方法三：

同樣background-image方法，使DIV出現圓角底景圖片；這個方法需要事先在PS或FW畫好一張圓角的背景圖片；但這個方法需要分成三個DIV實現，***個DIV放上圓角背景的最左邊部分，中間的DIV使用1像素背景填充，第三個DIV放上圓角背景的最右邊部分；

示例：

div_l{float:left;background:url(圓角背景的最左邊部分圖片url)no-repeat;}　　/*自行設置高度，寬度*/  
div_m{float:left;background:url(1像素背景填充圖片url)repeat-x;}　　/*自行設置高度，寬度，背景圖片橫向重復*/  
div_r{float:left;background:url(圓角背景的最右邊部分圖片url)no-repeat;}　　/*自行設置高度，寬度*/  
<divclassdivclass="div_l"></div> 
<divclassdivclass="div_m">DIV內容DIV內容</div> 
<divclassdivclass="div_r"></div>

總結：此方法步驟較多，但靈活性較好，適用于任意寬度的圓角DIV。

【編輯推薦】

JavaScript代碼輕松實現DIV圓角
CSS中margin邊界疊加問題及解決方案
CSS樣式表高效使用八大秘訣
創建和插入CSS樣式表秘笈
實現CSS垂直居中的五大方法及優缺點

責任編輯：佚名來源： xin126.cn

DIV 圓角