定义CSS样式圆角有立体感的DIV边框

http://www.veryhuo.com Liehuo.Net 2009-09-19 投递稿件

　　烈火网(LieHuo.Net)教程 CSS制作圆角有立体感的DIV边框，没有使用任何的修饰图片哦，感觉酷棒，如果对颜色不满意，可以自己改，不过要注意颜色之间的色差，要不然效果不理想。其实不用图片的话网页加载非常快，不过CSs定义略显麻烦些。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆角边框</title> <style type="text/css"> #sash_left { width:430px; float:left; } #sash_left ul { text-align:left; vertical-align:middle; padding-left:75px; } #sash_left ul li { line-height:16px; margin:2px 0; } .b1, .b2, .b3, .b4 { font-size:1px; overflow:hidden; display:block; } .b1 { height:1px; background:#AAA; margin:0 5px; } .b2 { height:1px; background:#E0E0E0; border-right:2px solid #AAA; border-left:2px solid #AAA; margin:0 3px; } .b3 { height:1px; background:#E3E3E3; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 2px; } .b4 { height:2px; background:#E6E6E6; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 1px; } .contentb { height:186px; background:#E9E9E9; border-right:1px solid #AAA; border-left:1px solid #AAA; } </style> </head> <body> <div id="sash_left"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <ul> <li class="dashedline"><a href='http://www.veryhuo.com/z/javaxz/' target='_blank'><b>Java</b></a>Script/CSS特效代码</li> </ul> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div> </body> </html><center>本代码来自烈火网，更多教程请访问：<a href=http://www.veryhuo.com/ target="new" _fcksavedurl="http://www.veryhuo.com/ target="new"">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

上一篇：Css样式教学：Haslayout的综合使用
下一篇：Css打造一个漂亮的文章排行榜列表

相关阅读

17-05-27人生日历截图快捷键是什么怎么自定义截图热
17-05-15人生日历今日概览自定义显示设置说明
16-07-27LOL自定义皮肤使用教程
16-04-19陌陌添加自定义表情的方法
16-01-27泰捷视频删除自定义节目源的方法
16-01-27HDP删除直播源 HDP删除自定义的方法
15-10-19iPhone微信怎么添加自定义表情
15-09-19百度输入法怎么自定义短语百度输入法设置短
15-05-26人生日历自定义假期(拼假日历)攻略
15-05-23Win7立体声混音在哪 Win7立体声混音设置开启
15-04-30QQ秀怎么弄自定义图片怎么弄自定义QQ秀
15-04-22微信怎么添加动态表情微信怎么添加自定义表
15-02-27微信伪装地理位置朋友圈自定义位置方法
15-02-26WordPress RSS Feed中加入自定义Post Type的
14-12-21搜狗拼音输入法设置自定义短语教程

网友评论

栏目导航

本类年榜本类月榜

推荐软件

推荐阅读相关下载

关于我们 | 联系方式 | 广告服务 | 站内搜索 | 网站合作 | 免责声明 | 网站地图 | 反馈意见 | 回到顶部