CSS+DIV实现圆角表格的三种方法-css设置圆角

本文和大家重点讨论一下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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

总结：此方法灵活性较好，但调用麻烦，每次调用，DIV前后都需要加上如此多的代码，而且圆角的半径不好调。

方法二：使用background-image方法，使DIV出现圆角背景图片；这个方法需要事先在PS或FW画好一张圆角的背景图片；

示例：

div{background:url(图片url)no-repeat;}  
 
1.
2.

总结：此方法适合用于特别位置，调用方法最简单，但灵活性不够好。要改变表格大小，必须重新做圆角背景图片。

方法三：

同样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> 
 
1.
2.
3.
4.
5.
6.
7.

总结：此方法步骤较多，但灵活性较好，适用于任意宽度的圆角DIV。

【编辑推荐】