div+css無圖片實現(xiàn)圓角矩形
在做頁面的時候，很多時候會用圓角矩形來妝點一下，但如果用圖片的話，即要用到圖片又要用到大量的代碼，勢必增加了頁面的重量
在頁面的時候剛好要用到圓角矩形，于是寫了以下方法，分享一下
|
以下為引用的內(nèi)容： <!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=gb2312" /> <title>div+css無圖片實現(xiàn)圓角矩形</title> <style type="text/css"> <!-- .RoundedCorner{background:url(../images/loginBg2.gif) 0 0 repeat-x;} b.rtop, b.rbottom{display:block;background:#ffffff;} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;} b.r1{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;} b.r2{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -3px repeat-x;} b.r3{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -2px repeat-x;} .content{border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;} b.r8{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;} b.r7{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;} b.r6{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;} --> </style> </head> <body> <div class="RoundedCorner"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> </b> <div class="content">內(nèi)容...</div> <b class="rbottom"> <b class="r6"></b> <b class="r7"></b> <b class="r8"></b> </b> </div> </body> </html> |
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答?。?點擊進入論壇
