您當前位置：首頁 > web前端 > htmlcss > 定義CSS樣式圓角有立體感的DIV邊框

定義CSS樣式圓角有立體感的DIV邊框

來源：程序員人生發布時間：2013-11-07 05:19:26 閱讀次數：3438次

　　網(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.vxbq.cn/ target="new" _fcksavedurl="http://www.vxbq.cn/ target="new"">http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

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

下一篇 jQuery-Selectors(選擇器)的使用(四-五、內容篇&可見性篇)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

定義CSS樣式圓角有立體感的DIV邊框