仿百度自適應(yīng)高度,寬度的圓角_層和布局特效
仿百度自適應(yīng)高度的圓角，寬度也可以自適應(yīng)，只要里面的內(nèi)容過多，它就會自動放大自己以適應(yīng)整體效果，本圓角用到了一個背景圖片，你可以從代碼里復(fù)制圖片地址下載圖片。<!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"> <title>仿百度寬度自適應(yīng)的圓角 - www.ghpqjb.com </title> <head> <style type="text/css"> .conternt{ position:relative; width:300px; height:200px; background:#DBEDF5; border:#9BC9DF 1px solid; } .conternt p{margin:10px} .lt,.ld,.rt,.rd{ position:absolute; width:3px; height:3px; overflow:hidden; } .lt{ left:-1px; top:-1px; background: url(http://p1.mb5u.com/texiao/3/20100522231321314.gif) 0 0 no-repeat; } .ld{ left:-1px; bottom:-1px; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231321314.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231321314.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231321314.gif) 0 -7px no-repeat; } .rt{ right:-1px; top:-1px; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231321314.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231321314.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231321314.gif) -11px 0 no-repeat; } .rd{ right:-1px; bottom:-1px; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231321314.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231321314.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231321314.gif) -11px -7px no-repeat; } </style> </head> <body> <div class="conternt"> <div class="lt"></div> <div class="ld"></div> <p>寬度和高度都可以自適應(yīng)，你可以把這里的文字加多一點</p> <div class="rt"></div> <div class="rd"></div> </div> </body> </html>
。