无需图片纯CSS设计Table圆角效果

概述网(LieHuo.Net)教程 在日常的上网中，我们经常会看到一些圆角边框，通常是需要用图片来实现的，那么能不能利用纯CSS来设计表格边框的圆角呢？其实是可以的，今天我们就来看一下CSS实现圆角的实例：<title>无需图片纯CSS设计Table圆角效果－liehuo.net</title><style type=&quo…

　　内存溢出 jb51.cc 在日常的上网中，我们经常会看到一些圆角边框，通常是需要用图片来实现的，那么能不能利用纯CSS来设计表格边框的圆角呢？其实是可以的，今天我们就来看一下CSS实现圆角的实例：

<Title>无需图片纯CSS设计table圆角效果－lIEhuo.net</Title><style type="text/CSS">div.LIEhuo_net_RoundedCorner...{background: #FFD1FA}b.rtop,b.rbottom...{display:block;background: #FFF}b.rtop b,b.rbottom b...{display:block;height: 1px;overflow:hidden; background: #ffD1FA}b.r1...{margin: 0 5px}b.r2...{margin: 0 3px}b.r3...{margin: 0 2px}b.rtop b.r4,b.rbottom b.r4...{margin: 0 1px;height: 2px}</style><div class="LIEhuo_net_RoundedCorner"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><table style="wIDth:500px;height:100px;"><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

 

总结

以上是内存溢出为你收集整理的无需图片纯CSS设计Table圆角效果全部内容，希望文章能够帮你解决无需图片纯CSS设计Table圆角效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。