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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: