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