再读《精通css》07：圆角

                2.2 圆角框
1、固定宽度的圆角可以用上下两个背景图片实现。

    顶部的背景图片运用到h1上，底部的运用到div.box上。可以加上padding来控制内容显示的区域。

 1 <h3>固定宽度，高度自适应圆角</h3>
 2 <hr />
 3 <div class="fixWidth">
 4     <h2>这是标题</h2>
 5     <p>内容高度自适应</p>
 6     <p>内容高度自适应</p>
 7     <p>内容高度自适应</p>
 8 </div>
 9 <br />
10 <div class="fixWidth">
11     <h2>这是标题</h2>
12     <p>内容高度自适应</p>
13     <p>内容高度自适应</p>
14     <p>内容高度自适应</p>
15     <p>内容高度自适应</p>
16     <p>内容高度自适应</p>
17     <p>内容高度自适应</p>
18 </div>

 1 /*固定宽度 高度自适应------------------------------------*/
 2 .fixWidth{
 3     width:200px;
 4     height:auto;
 5     min-height:100px;
 6     background:#09f url(roundedCornerBox/bottom.gif) center bottom no-repeat;
 7     }
 8 .fixWidth h2{
 9     padding:5px;
10     background:#09f url(roundedCornerBox/top.gif) center top no-repeat;
11     }
12 .fixWidth p{
13     padding:5px;
14     }

2、可以用类似的方法使用4个背景图片创建高度和宽度都自适应的圆角框。

 1 <h3>宽度和高度都自适应的圆角</h3>
 2 <div class="fix" style="width:200px;">
 3     <div class="fixOuter">
 4         <div class="fixInner">
 5             <div class="content">
 6                 这是一个高度和宽度都自适应的圆角。<br />
 7                 这是一个高度和宽度都自适应的圆角。<br />
 8                 这是一个高度和宽度都自适应的圆角。<br />
 9             </div>
10         </div>
11     </div>
12 </div>
13 <br />
14 <div class="fix" style="width:300px;">
15     <div class="fixOuter">
16         <div class="fixInner">
17             <div class="content">
18                 这是一个高度和宽度都自适应的圆角。<br />
19                 这是一个高度和宽度都自适应的圆角。<br />
20                 这是一个高度和宽度都自适应的圆角。<br />
21             </div>
22         </div>
23     </div>
24 </div>

 1 /*高度和宽度自适应的圆角---------------------------------------------*/
 2 .fix{
 3     min-width:200px;
 4     background:#09f url(roundedCornerBox/tl.gif) left top no-repeat;
 5     }
 6 .fix .fixOuter{
 7     background:url(roundedCornerBox/tr.gif) right top no-repeat;
 8     }
 9 .fix .fixOuter .fixInner{
10     background:url(roundedCornerBox/br.gif) right bottom no-repeat;
11     }
12 .fix .fixOuter .fixInner .content{
13     padding:5px;
14     background:url(roundedCornerBox/bl.gif) left bottom no-repeat;
15     }

3、还可以使用很多个1像素高的div叠加的方式创建圆角。（山顶角）

 1 <h3>无图版圆角</h3>
 2 <hr />
 3 <div class="noImg">
 4     <div class="warp1"></div>
 5     <div class="warp2"></div>
 6     <div class="warp3"></div>
 7     <div class="warp4"></div>
 8     <div class="content">这里是内容</div>
 9     <div class="warp4"></div>
10     <div class="warp3"></div>
11     <div class="warp2"></div>
12     <div class="warp1"></div>
13 </div>

 1 /*无图版----------------------------------------*/
 2 .noImg{
 3     width:200px;
 4     height:150px;
 5     }
 6 .noImg .warp1, .noImg .warp2, .noImg .warp3, .noImg .warp4{
 7     width:auto;
 8     height:1px;
 9     line-height:0;
10     font-size:0;
11     overflow:hidden;
12     background:#09F;
13     border-left:#fff solid 4px;
14     border-right:#fff solid 4px;
15     }
16 .noImg .warp2{
17     border-left:#fff solid 3px;
18     border-right:#fff solid 3px;
19     }
20 .noImg .warp3{
21     border-left:#fff solid 2px;
22     border-right:#fff solid 2px;
23     }
24 .noImg .warp4{
25     border-left:#fff solid 1px;
26     border-right:#fff solid 1px;
27     }
28 .noImg .content{
29     width:190px;
30     height:132px;
31     background:#09F;
32     padding:5px;
33     }

完整源码下载