CSS+DIV实现圆角表格的方法有哪些

发布时间:2021-08-07 16:27:05 作者:chen
来源:亿速云 阅读:120

这篇文章主要介绍“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实现圆角表格的方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. css+div隐藏滚动条的实现方法是什么
  2. 使用CSS实现边框圆角的方法是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

div css

上一篇:MySQL数据库中怎么实现多主复制

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》