百度空间的圆角矩形

在百度空间的首页，偶然发现其右侧的圆角矩形有点意思，剥离下来分析一下。

代码如下：

<!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>百度空间右侧圆角矩形分析 - by:hewei.org</title> <style type="text/css"> * {margin:0;padding:0;} .b2{margin:100px;border:1px solid #CCCCCC;} .l{float:left;} .r{float:right;} .rct .l{left:-1px;top:-1px;} .rcb .l{left:-1px;top:1px;} .rct .r{right:-1px;top:-1px;} .rcb .r{right:-1px;top:1px;} .rct .l, .rct .r, .rcb .l, .rcb .r { background-image:url(http://img.baidu.com/hi/img/index/rc.gif); font-size:0; height:5px; position:relative; width:5px; } .b2 .cnt{padding:10px;} .tl1{background-position:0% 0%;} .tr1{background-position:100% 0%;} .bl1{background-position:0% 100%;} .br1{background-position:100% 100%;} .rcb,.rct {clear:both;height:5px;} .cnt h1{color:#F00;font-size:14px;} .cnt p{line-height:25px;padding:10px 0;} </style> </head> <body> <div class="b2"> <div class="rct"><div class="l tl1"></div><div class="r tr1"></div></div> <div class="cnt"> <h1>百度空间右侧圆角矩形分析 - by:hewei.org</h1> <p>只用到了一个10X10px的小圆形图片，通过对该图片的定位来达到圆角矩形的目的，虽然对于seo来说，部分控制代码不符合内容表现形式分离，不过代码比较简洁，还是比较不错的。自适应高度，兼容各大浏览器。</p> </div> <div class="rcb"><div class="l bl1"></div><div class="r br1"></div></div> </div> </body> </html>