CSS圆角框制作（2）

  上接：固定宽度的圆角框

可变宽度的圆角框

   可变宽度的圆角框，即宽度和高度都可以改变的圆角框。这种圆角框可以随心所欲制作页面，背景图可以随意根据自己的需要进行改变。

   为大家介绍制作可变宽度的圆角框的方法--五图像圆角框制作方法。

   五图像分为哪五个图像呢？

    从图中可以看出五图像分为：1、左上部分；2、左下部分；3、右上部分；4、右中部分；5、右下部分。

    CSS代码如下：

<span style="font-family:SimSun;font-size:18px;">/*可变宽度的圆角框样式*/.round2 {               /*左上部分*/    background-image:url("../Images/round2_left_top.gif");    background-position:top left;    background-repeat:no-repeat;}     .round2 h3 {                 /* 右上部分*/        background:url("../Images/round2_right_top.gif") no-repeat top right;       /* 将背景图的样式卸载同一行中，分别是插入图片，不重复，位置*/        padding-left:35px;        padding-top:12px;        padding-bottom:30px;        font-size:16px;        font-weight:bold;    }     .round2 .con {               /*右中部分 */        background:url("../Images/round2_right_middle.gif") repeat-y top right;        margin-top:-1em;/*解决IE系列的空隙问题*/        padding:10px 20px;    }    .round2 .footer {                        /*左下部分 */        background:url("../Images/round2_left_bottom.gif") no-repeat bottom left;    }         .round2 .footer p {                  /*右下部分 */            background:url("../Images/round2_right_bottom.gif") no-repeat bottom right;        }</span>

   此方法制作出的圆角框背景图宽度和高度是可以改变的，所以不需要设置高度（width）和宽度（height）的值。

知识拓展

    随着HTML5/CSS3的到来，CSS3样式的圆角必将成为构建未来网站的趋势。CSS3相对于其它方式，更加容易应用，不需要额外的HTML标记和图片。目前支持CSS3圆角的浏览器包括FireFox,Chrome,Opera,IE9等；由于目前中文用户多使用IE，并且多为IE6-IE8，因此，CSS3的普及尚需时日。

    CSS2圆角一般需要额外的HTML标记和图片，然而其优点也是非常明显的：支持所有主流浏览器，包括IE(6-9),FireFox,Chrome,Opera等。