如果你采用表格布局,那么想实现圆角的话要依靠图片!可以去懒人图库搜一下box,可以找到一堆,原理不说了,无非就是表格嵌套-----太乱了也不方便修改,不推荐使用!
如果采用div布局,那么实现圆角的方法有两种:
1.纯代码,原理为用标签边框模拟圆角处的像素,你把一个圆角效果放大n倍后你会发现再圆的角也是由1px的小块组成,这样就好办了!如下:
内容
然后设置,t1
t2
t3
...高为1px。左右边框为1px。一次左右边距加1.(如t1的margin为5,那么t2就为4.。类推!!)这里讲原理,具体如何才更圆,你可以放大一张图来找找规律。
2.使用图片,也是推荐的一种方法!
不要盲目追求
代码的才是最好的,试想如果一个页面出现10个圆角层,相信大堆的代码会让你很头疼!
所以最好的办法是,切两条圆角部分的图片,顶部一张,底部一张,中间的div设置左右边框,这样简洁实用!如果各圆角层的宽度不统一的话,稍麻烦一些,将4个角的图切下来。然后分别通过div加float属性。控制到div层的4个角落,中间部分用border填充。(当然,不到万不得以还是避免使用。)
我们的目的是,代码简洁精准,维护方便!!
希望对你有帮助!!!
在现在css3.0还没有到来前还没有办法把表格设置成圆角的最平常的做法就是用图片
圆角的用图片画好再插入表格或背景的