CSS+DIV实现圆角表格的三种方法

本文和大家重点讨论一下CSS+DIV实现圆角表格的三种方法，相信本文介绍一定会让你有所收获。

专注于为中小企业提供成都网站制作、成都网站设计、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业奎屯免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

CSS+DIV实现圆角表格的三种方法

很多网页上都有圆角表格，让人看起来非常舒服。今天向大家讲解CSS+DIV实现圆角表格的三种方法。

方法一：网上流传最多的DIV圆角方式，完整代码如下；

 
 
 
  
  
   
  
  
   
  
  
  CSS实现DIV圆角的三种方法 
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  圆角DIV内容

总结：此方法灵活性较好，但调用麻烦，每次调用，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;}　　/*自行设置高度，宽度*/