CSS圆角框制作(1)

您所在的位置:网站首页 圆角框制作全部视频 CSS圆角框制作(1)

CSS圆角框制作(1)

2024-07-14 11:33| 来源: 网络整理| 查看: 265

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

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

     那如何改变这种情况呢?

     这里就谈到了圆角框的制作,如何制作呢?

    下面介绍两种方法:

固定宽度的圆角框

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

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

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

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

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

.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; }

将中间部分的图片放到最大的框架中,以便其进行平铺。其宽度(width)是不可以修改的,必须和我们截取的圆角框宽度相同,而其高度(height)可根据需要进行修改。 容易发生的错误:若最终制作出来的web页面中看不到左右边框,可能是由于a、设置的宽度小于背景图片的宽度;b、置于背景图片上面的图片遮挡住了背景图,修改上面的图片即可。 下接:可变宽度的圆角框



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3