这篇文章主要介绍“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。
到此，关于“CSS+DIV实现圆角表格的方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
