一、基于淘宝首页的圆角矩形设计（九宫格圆角矩形）
<!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>淘宝圆角模仿制作</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>
关于main_corner.png：
这张小圆形图片如果你自己用ps制作的时候要注意两点：
1、小圆的外层是白色的，内层是透明的（以形成山顶角圆角矩形的效果）
2、导出png格式的时候，有两种方案：
①在psd文档中将要绘制圆形选区的时候，保证当前选择工具选项“消除锯齿”为勾选状态，导出为“web所用格式”时注意一定要保存成png24的格式（如果你保存成png8或gif格式的话，那么当#testsection为非白色背景时，圆角边缘将会有白色锯齿产生）。这是视觉最佳方案，效果如：
②在psd文档中将要绘制圆形选区的时候，保证当前选择工具选项“消除锯齿”为未勾选状态，导出为“web所用格式”时可保存成png8（或gif）格式，以缩小图像文件体积。这时导出的图像圆角不是很平滑，不过效果在可接受范围内，效果如：
。
具体png图像生成原理可点击这里。
当然，上面的方法编码比较繁琐，您也可以借助javascript来完成效果。
二、
1、 NiftyCube javasript圆角效果
参数配置如下：
| 选择器 | 例子 |
|---|---|
| 标签选择器 | "p" "h2" |
| id 选择器 | "div#header" "h2#about" |
| 类选择器 | "div.news" "span.date" "p.comment" |
| 后代选择器(id) | "div#content h2" "div#menu a" |
| 后代选择器(class) | "ul.news li" "div.entry h4" |
| 群组选择器 | "h2,h3" "div#header,div#content,div#footer" "ul#menu li,div.entry li" |
| 关键字 | 含义 |
|---|---|
| tl | 左上角 |
| tr | 右上角 |
| bl | 左下角 |
| br | 右下角 |
| top | 左上角和右上角 |
| bottom | 左下角和右下角 |
| left | 左上角和左下角 |
| right | 右上角和右下角 |
| all (default) | 所有的四个角落 |
| none | 没有角落 |
| small | 小角落(2px) |
| normal (default) | 正常大小的角落(5px) |
| big | 大尺寸的角落(10px) |
| transparent | 内部透明，别名角落可以得到。此选项自动激活的因素，如果没有全面的背景色指定。 |
| fixed-height | 固定高度 |
| same-height | 相同高度,元素必须指定范围内的一个参数为准 |
翻译来源：亚当学院
浙公网安备 33010602011771号