首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 > CSS 美化表格 CSS 美化表格边框为凹陷立体效果的实现方法 2009-10-06 16:34:18 作者： 这个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">脚本之家</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">脚本之家</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需刷新才能执行] 您可能感兴趣的文章:利用CSS3新特性创建透明边框三角js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）纯CSS实现的漂亮的立体图片边框效果，阴影代码css+table 1px边框单元格有关表格边框的css语法整理(1)表格边框的css语法浅谈CSS不规则边框的生成方案
