無需圖片純CSS設計Table圓角效果

　　網(LieHuo.Net)教程 在日常的上網中，我們經常會看到一些圓角邊框，通常是需要用圖片來實現的，那么能不能利用純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.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈