网页圆角的背景图法| 知更鸟

现在的位置: >>网页圆角的背景图法

网页的圆角处理,其实最开始的九宫格的表格处理是挺方便的,只是现在都不用表格布局了,自然就被非法取缔了。呵呵。

微软的有VML画圆角,由于只是它自家的特产,大家也都不用了,再有就是Javascript的处理方法,很多都会影响页面性能,大家也都不爱用 了。

剩下来的,就只能是老老实实地用背景图了。常用的方法有:

1、固定高度的情况下,我们通常把背景图的宽度拉到足够大,做一个大图,如下:

2、同样,固定宽度的话,我们就拉长高度,如下:

原理都是一样的,就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长,我们一般会将它分为3块来实现,即头部、中间 (1px背景垂直拉伸)、和底边。

3、以上是一般网站局部使用圆角的常见处理方法,但如果是整站的UI都很圆的话,显然上面2个常见的方法就不是很好用了,到处都是圆角,高度宽度都 随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。

同样是基于这种“九宫格”处理的思想,在代码实现上各个网站也有各自的招。

1、头、尾各用3个标签(div or span)来实现圆角,中间直接用border-left、border-right属性来补2边。

2、用一个很大很大的圆角图片,然后来个若干层div嵌套实现,道理和最上面说的拉长高度和拉长宽度是一样的,它这个是双向无限拉长,比如 Facebooke的这个是2000*16像素的尺寸。

3、图太大了,总难免是有点舍不得用的,那就用小图,看淘宝网首页的,圆角就是这样的。它的原理是在标准的边框实现之后,再额外地向4个角加上一张小图片去补圆,它这个做法,除了图片是小的之外,在网页 加载背景图之前,也是有一个比较好的视觉呈现的。示意图如下:

具体代码。

给我留言

快捷键:Ctrl+Enter

[ 拒绝回复无头像者留言,抱歉!]

郑重声明:资讯 【网页圆角的背景图法| 知更鸟】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——