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

<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>

详细出处参考:http://www.jb51.net/article/20272.htm
posted @ 2010-08-26 10:08  小锋神  阅读(5558)  评论(0编辑  收藏  举报