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

完整的圆角框样式图片：

切割成为五幅图片后为：

1.

    

 2.

                  

3.

      

4.

 

5.    

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

 

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

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

代码

1       < 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 

 

 

转载于:https://www.cnblogs.com/hkingh/articles/1624180.html