CSS圆角框制作（1）

客官°小女子只卖身不卖艺 2022-08-13 04:58 230阅读 0赞

在盒子模型里面没有设置圆角框的属性，要在Div+CSS中实现圆角框，只能使用圆角背景图片。

若单纯使用截取下来的圆角框，则其大小是固定的，不能改动。这就要求制作的网页去适应图片背景，很不方便！

那如何改变这种情况呢？

这里就谈到了圆角框的制作，如何制作呢？

下面介绍两种方法：

# 固定宽度的圆角框 #

顾名思义，固定宽度的圆角框的宽度是固定的，而高度是可伸展的。

既然，将整张图片作为背景图，不利于修改，那么我们换一种方法思考。不将整张图片作为背景图，截取图片的部分呢？

截取一个圆角框背景图片。

仔细看圆角框会发现圆角框的上面和下面部分不同，中间这一小块是一个相同的部分沿着y轴平铺下来，这样就形成了圆角框。看到这句话，我们是否会想到将图片分成三部分，进行拼接制作出圆角框背景图呢！

用图片处理工具（如PhotoShop），处理出这三个部分，套用到div中，就会形成圆角图。

<span style="font-family:SimSun;">.round1 {
        width: 518px;						/*设置宽度是固定的，和图片的宽度相同*/
        height :235px;					/*设置高度可以根据需要进行改变*/
        background-image: url("../Images/round1_middle.gif"); /*插入中间部分的图片*/
        background-position: center;			/*图片的位置，在中间*/
        background-repeat: repeat-y;			 /*设置中间部分图片沿y轴进行平铺，默认平铺*/
        margin :auto ;
        margin-top:160px;
    }
    
    .round1 h3 {
        background-image: url('../Images/round1_top.gif'); /*两个点代表上一级目录的*/
        background-position:top;				/*图片的位置，在顶部*/
        background-repeat: no-repeat;			/*设置图片不重复*/
        padding :20px 30px;
        text-align :center ;					/*设置内容居中 */
    }
    
    .round1 #footer {
        background-image: url('../Images/round1_bottom.gif'); /*两个点代表上一级目录的*/
        background-position:bottom;			/*图片的位置，在底部*/
        background-repeat: no-repeat;
        padding :20px;
        padding-left :300px;
    }</span>

将中间部分的图片放到最大的框架中，以便其进行平铺。其宽度（width）是不可以修改的，必须和我们截取的圆角框宽度相同，而其高度（height）可根据需要进行修改。

容易发生的错误：若最终制作出来的web页面中看不到左右边框，可能是由于a、设置的宽度小于背景图片的宽度；b、置于背景图片上面的图片遮挡住了背景图，修改上面的图片即可。

下接：可变宽度的圆角框