CSS圆角框制作（2）

最新推荐文章于 2021-08-04 05:08:37 发布

梦Dreamer

最新推荐文章于 2021-08-04 05:08:37 发布

阅读量1.3k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/shiqijiamengjie/article/details/40042217

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上接：固定宽度的圆角框

可变宽度的圆角框

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

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

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

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