新零售商城 快打包

用一张小图片实现网页圆角的方法

所属栏目:兼容性问题 时间:2012-09-07 来源:网络 作者:不详 点击:

越来越来的网页采用圆角边框来代替直角了,圆角确实要比直角的美观。

但许多童鞋们苦于不知如果制作圆角。在码这篇文章之前我一直都是采用整行的 上、下 两张做好的图片来实现圆角,虽然同样能达到预期的效果。但因为网页中常常需要各种宽度的DIV,那么就得制作一堆的图片来,而且要多写很多DIV。确实为下下策。

网上也有许多的制作圆角的方法,JS啦,纯CSS啦,小图片啦等等。我分析测试了下。个人觉得还是用一张圆角小图片定位在DIV的四个角来得方便,一来呢,可以重复使用,不用担心DIV的宽度变化,二来呢,代码简洁。所以这里将这种方法分享给大家吧。 原理示意图:
1.gif

首先,我们准备一张10*10px大小的圆角图片,如下:

0226480.jpg

 

颜色大家把握好,当然也有人制作四个角分别四张小图片。一张就OK,不用那那么多那么麻烦。

然后在需要圆角的DIV中加入以下代码

<span class=”lt”></span> <!–左上角–>

<span class=”rt”></span><!–右上角–>

<span class=”lb”></span><!–左下角–>

<span class=”rb”></span><!–右下角–>

如:

<div id=”abc”>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

接着就是CSS样式了。

然后给父DIV 加入以下样式,如:

 

#abc {position:relative;width:235px; height:auto; overflow:hidden;}
.lt {width:5px; height:5px; background-image:url(dddddd.jpg); background-repeat:no-repeat; background-position:left bottom; position:absolute; left:0;top:0; font-size:0}
.rt {width:5px; height:5px; background-image:url(dddddd.jpg); background-repeat:no-repeat; background-position:left bottom; position:absolute; top:0;right:0; font-size:0}
.lb {width:5px; height:5px; background-image:url(dddddd.jpg); background-repeat:no-repeat; background-position:left bottom; position:absolute; left:0bottom:0; font-size:0}
.rb {width:5px; height:5px; background-image:url(dddddd.jpg); background-repeat:no-repeat; background-position:left bottom; position:absolute; right:0;bottom:0; font-size:0}

 

 红色的是关键,有它才能准确定位。其它的根据实际况修改。

因为在5px在IE下是不认的。所以给加上 font-size:0; 即可解决此BUG。

 

 

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:
更多>>

一流商城

      SQL Error: select id,title,titleurl,titlepic from sql16css_cn.mall_ecms_shop where firsttitle=1 order by id desc limit 9

    你应该也喜欢这些吧

    共有 0 条评论

    给个评价吧

    验证码: