CSS圆角框制作（1）

     在盒子模型里面没有设置圆角框的属性，要在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、置于背景图片上面的图片遮挡住了背景图，修改上面的图片即可。

   下接：可变宽度的圆角框