您当前位置：首页 > web前端 > htmlcss > 定义CSS样式圆角有立体感的DIV边框

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

来源：程序员人生发布时间：2013-11-07 05:19:26 阅读次数：3240次

　　网(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">JavaScript/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.wfuyu.com/ target="new" _fcksavedurl="http://www.wfuyu.com/ target="new"">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

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

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

上一篇 Serv-U中文版建立FTP服务器教程

下一篇 jQuery-Selectors(选择器)的使用(四-五、内容篇&可见性篇)

分享到:

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

为码而活

积分：4237

15粉丝

7关注

栏目热点