通过分割为五个图像制作可变宽度的圆角框

完整的圆角框样式图片：

切割成为五幅图片后为：

1.

    

 2.

                  

3.

      

4.

 

5.    

3号图片再进一步切割为高度为一像素的6号图片：（这里有个图片由于高度太小可能看不清）

 

最终用到的图片为1，2，4，5，6好图片

写个html文件在body中为，引入CSS文件

     <div id="m_category" class="round2">
2         <h3>这里是标题</h3>
3         <div class="con">
4             <p>这里是内容</p>
5         </div>
6         <div class="footer">
7             <p>这里是版权</p>
8         </div>
9     </div>

 

CSS文件为：

 

 1 /*
 2  * 创建人：hking
 3  */
 4 *
 5 {
 6     margin: 0px;
 7     padding: 0px;
 8 }
 9 body
10 {
11     font-size: 14px;
12 }
13 #m_category
14 {
15     width: 200px;
16 }
17 #m_category .con
18 {
19     height:300px;
20 }
21 #m_category .con p
22 {
23     margin:20px 50px;
24 }
25 /*可变宽度的圆角框*/
26 .round2
27 {
28     background-image: url(../images/round_left_top.gif);
29     background-position: left top;
30     background-repeat: no-repeat;
31 }
32 .round2 h3
33 {
34     background-image: url(../images/round_right_top.gif);
35     background-position: right top;
36     background-repeat: no-repeat;
37     padding-left:35px;
38     padding-top:12px;
39     padding-bottom:24px;
40     font-size:16px;
41     font-weight:bold;
42 }
43 .round2 .con
44 {
45     background-image: url(../images/round_right_middle.gif);
46     background-position: right top;
47     background-repeat: repeat-y;
48     margin-top:-1em;/*解决IE系列的空隙问题*/
49     padding:10px 20px;
50 }
51 .round2 .footer
52 {
53     background-image: url(../images/round_left_bottom.gif);
54     background-position: left bottom;
55     background-repeat: no-repeat;
56 }
57 .round2 .footer p
58 {
59     background-image:url(../images/round_right_bottom.gif);
60     background-position:right bottom;
61     background-repeat:no-repeat;
62 }
63