再读《精通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     }

完整源码下载