您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > 定義CSS樣式圓角有立體感的DIV邊框

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

來源：程序員人生發(fā)布時(shí)間：2013-11-07 05:19:26 閱讀次數(shù)：3453次

　　網(wǎng)(LieHuo.Net)教程 CSS制作圓角有立體感的DIV邊框，沒有使用任何的修飾圖片哦，感覺酷棒，如果對(duì)顏色不滿意，可以自己改，不過要注意顏色之間的色差，要不然效果不理想。其實(shí)不用圖片的話網(wǎng)頁(yè)加載非常快，不過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>本代碼來自網(wǎng)，更多教程請(qǐng)?jiān)L問：<a href=http://www.jyygyx.com/ target="new" _fcksavedurl="http://www.jyygyx.com/ target="new"">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

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

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

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

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

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