关于圆角矩形制作的几种方案

一、基于淘宝首页的圆角矩形设计（九宫格圆角矩形）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝圆角模仿制作</title>
<style type="text/css" >
*{margin:0px; padding:0px;}
body{text-align:center; background-color:#fff;}
#testSection{margin:100px auto auto; text-align:left;}

#testSection{width:970px; background-color:#ccc}/*TODO：width and bgcolor*/
em.main_corner_topright,
em.main_corner_topright span,
em.main_corner_bottomright,
em.main_corner_bottomright span{display:block;}

.main_corner_topleft,
.main_corner_topright,
.main_corner_bottomleft,
.main_corner_bottomright{background:url(imgaes/main_corner.png) no-repeat top left; }
em.main_corner_topright {background-position:top right;}
.main_corner_bottomleft {background-position:bottom left;}
em.main_corner_bottomright{background-position:bottom right;}

em.main_corner_topright span,
em.main_corner_bottomright span{ border-top:1px solid #40a2f4; margin-left:5px; margin-right:5px; height:5px;_font-size:0px; background-color:#ccc}/*TODO：bgcolor should be same with #testSection'*/
em.main_corner_bottomright span{ border-top:0px;border-bottom:1px solid #40a2f4; }


.test_section_content{border-left:1px solid #40a2f4;border-right:1px solid #40a2f4;padding:10px;}


</style>
</head>

<body>
<div id="testSection">
<div class="main_corner_topleft"><em class="main_corner_topright"><span> </span></em></div>

<div class="test_section_content" id="testSectionContent">这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字这是用来测试淘宝圆角的文字猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀猫哥好呀
</div>

<div class="main_corner_bottomleft"><em class="main_corner_bottomright"><span> </span></em></div>
</div>
</body>
</html>
<!DOCTY