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需再刷新一下页面才能执行]

您可能感兴趣的文章:

CSS 布局一个漂亮的滑块
这个是用CSS美化出来的一个漂亮滑块，注意它是一个静态的，没有加入JS,因此不能适时拖动，本示例重点是想表述CSS布局复杂图形的一种方法.
2009-10-10
判断两种颜色值是否为相似颜色
判断两种颜色值是否为相似颜色...
2006-12-12
功能很全的精品JS计算器
功能很全的精品JS计算器...
2007-02-02
用javascript实现页面打印的三种方法
用javascript实现页面打印的三种方法...
2007-03-03
JavaScript实现禁止后退的方法
JavaScript实现禁止后退的方法...
2006-12-12
双击滚屏-常用推荐
双击滚屏-常用推荐...
2006-11-11
数字金额千位分隔的Javascript
数字金额千位分隔的Javascript...
2006-08-08
用JavaScript获取网页中的js、css、Flash等文件
用JavaScript获取网页中的js、css、Flash等文件...
2006-12-12
非常不错的页面特效建议大家看下
非常不错的页面特效建议大家看下...
2007-06-06
让文字在页面上90度，180度翻转
让文字在页面上90度，180度翻转...
2006-08-08

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具