CSS圆角框制作（2）

ゝ一世哀愁。 2022-08-13 04:58 247阅读 0赞

上接：[固定宽度的圆角框][Link 1]

# 可变宽度的圆角框 #

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

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

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

![Center][]

从图中可以看出五图像分为：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等。

[Link 1]: http://blog.csdn.net/shiqijiamengjie/article/details/40042003
[Center]: /images/20220810/7d079bef8afa4b6897d4d292c7af4517.png