您当前位置：首页 > web前端 > htmlcss > CSS实现边框显示凹陷立体效果的实例代码

CSS实现边框显示凹陷立体效果的实例代码

来源：程序员人生发布时间：2014-06-11 19:40:23 阅读次数：3304次

　　网(LieHuo.Net)教程这个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果，当然，这里仅提供一种思路，你可以灵活修改使用。

<html><head><title>LIEHUO.NET</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">网-LIEHUO.NET</span></legend><br><form name="form1" method="post" action=""><p align="left"><input type="checkbox" name="checkbox" value="checkbox"><span style="font size:12px">AJAX专栏</span> <br></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><br></fieldset><br><br><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">网-LIEHUO.NET</span></legend><br><form name="form1" method="post" action=""><p align="left"><input type="checkbox" name="checkbox4" value="checkbox"><span style="font size:12px">AJAX专栏</span> <br></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><br></fieldset></center></body></html><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 搭建Access为主的Mdb数据库

下一篇 远程桌面服务中的“IP虚拟化”及其作用

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点