CSS 美化表格边框为凹陷立体效果的实现方法

这个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。

当然，这里仅提供一种思路，你可以灵活修改使用。

<html> <head> <title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body> <center> <fieldset id=shop style="width:200;"> <legend><span style="font size:12px">html中文网</span></legend><form name="form1" method="post" action=""> <p align="left"> <input type="checkbox" name="checkbox" value="checkbox"><span style="font size:12px">AJAX专栏</span></p><p align="left"> <input type="checkbox" name="checkbox2" value="checkbox"><span style="font size:12px">FW专栏</span></p><p align="left"> <input type="checkbox" name="checkbox3" value="checkbox"><span style="font size:12px">FLASH专栏</span></p></form><span style="font size:12px"><font color="#990000">此边框为默认风格</font></span></fieldset><fieldset id=shop style="width:200;border:inset;border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;"> <legend><span style="font size:12px">html中文网</span></legend><form name="form1" method="post" action=""> <p align="left"> <input type="checkbox" name="checkbox4" value="checkbox"><span style="font size:12px">AJAX专栏</span></p><p align="left"> <input type="checkbox" name="checkbox22" value="checkbox"><span style="font size:12px">FW专栏</span></p><p align="left"> <input type="checkbox" name="checkbox32" value="checkbox"><span style="font size:12px">FLASH专栏</span></p></form><span style="font size:12px"><font color="#990000">此边框为凹陷效果</font></span></fieldset></center></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是CSS 美化表格边框为凹陷立体效果的实现方法的详细内容，更多请关注0133技术站其它相关文章！