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

完整源码下载