CSS圆角框制作(1)
2014-10-13 11:42
260 查看
在盒子模型里面没有设置圆角框的属性,要在Div+CSS中实现圆角框,只能使用圆角背景图片。
若单纯使用截取下来的圆角框,则其大小是固定的,不能改动。这就要求制作的网页去适应图片背景,很不方便!
那如何改变这种情况呢?
这里就谈到了圆角框的制作,如何制作呢?
下面介绍两种方法:
既然,将整张图片作为背景图,不利于修改,那么我们换一种方法思考。不将整张图片作为背景图,截取图片的部分呢?
截取一个圆角框背景图片。
仔细看圆角框会发现圆角框的上面和下面部分不同,中间这一小块是一个相同的部分沿着y轴平铺下来,这样就形成了圆角框。看到这句话,我们是否会想到将图片分成三部分,进行拼接制作出圆角框背景图呢!
用图片处理工具(如PhotoShop),处理出这三个部分,套用到div中,就会形成圆角图。
若单纯使用截取下来的圆角框,则其大小是固定的,不能改动。这就要求制作的网页去适应图片背景,很不方便!
那如何改变这种情况呢?
这里就谈到了圆角框的制作,如何制作呢?
下面介绍两种方法:
固定宽度的圆角框
顾名思义,固定宽度的圆角框的宽度是固定的,而高度是可伸展的。既然,将整张图片作为背景图,不利于修改,那么我们换一种方法思考。不将整张图片作为背景图,截取图片的部分呢?
截取一个圆角框背景图片。
仔细看圆角框会发现圆角框的上面和下面部分不同,中间这一小块是一个相同的部分沿着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、置于背景图片上面的图片遮挡住了背景图,修改上面的图片即可。
下接:可变宽度的圆角框
相关文章推荐
- css分类导航和圆角菜单的制作
- 用CSS制作的圆角层(转贴)
- [推荐]制作div+css圆角
- CSS圆角边框 纯CSS制作
- 纯CSS无图打造圆角Table 无图制作圆角
- [推荐]制作div+css圆角
- 纯DIV+CSS制作圆角矩形
- [推荐]制作div+css圆角
- CSS圆角框制作(2)
- CSS制作一个商品分类列表,边框是圆角弧度
- 利用滑动门原理制作圆角和渐变色按钮【css】
- [推荐]制作div+css圆角
- CSS制作无图片圆角矩形
- 纯CSS制作圆角按钮,不需图片,兼容各浏览器
- HTML/CSS导航菜单-圆角菜单的制作
- CSS制作圆角边框
- 用div+css制作圆角矩形的原理
- div+css制作圆角宽度定宽边框
- CSS圆角在线制作等
- 用CSS 而不是Table来制作圆角框