仿百度自适应高度,宽度的圆角_层和布局特效
仿百度自适应高度的圆角，宽度也可以自适应，只要里面的内容过多，它就会自动放大自己以适应整体效果，本圆角用到了一个背景图片，你可以从代码里复制图片地址下载图片。<!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>仿百度宽度自适应的圆角 - www.mb5u.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>宽度和高度都可以自适应，你可以把这里的文字加多一点</p> <div class="rt"></div> <div class="rd"></div> </div> </body> </html>
。