也谈网页圆角的背景图法(2)
作者:大伟 来源:大伟blog 时间:2009-03-19 14:09:00
3、以上是一般网站局部使用圆角的常见处理方法,但如果是整站的UI都很圆的话,显然上面2个常见的方法就不是很好用了,到处都是圆角,高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。
同样是基于这种“九宫格”处理的思想,在代码实现上各个网站也有各自的招。
1、头、尾各用3个标签(div or span)来实现圆角,中间直接用border-left、border-right属性来补2边。
2、用一个很大很大的圆角图片,然后来个若干层div嵌套实现,道理和最上面说的拉长高度和拉长宽度是一样的,它这个是双向无限拉长,比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。
3、图太大了,总难免是有点舍不得用的,那就用小图,看淘宝网首页的,实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后,再额外地向4个角加上一张小图片去补圆,它这个做法,除了图片是小的之外,在网页加载背景图之前,也是有一个比较好的视觉呈现的。示意图如下:
具体代码请看例子。
标签:css教程,背景,圆角
0
投稿
猜你喜欢
实现框架页面iframe的背景透明方法
2008-06-18 12:21:00
用ASP实现IE地址栏参数的判断
2008-10-10 15:54:00
用 onerror 获取错误信息 js Debug
2008-11-03 19:08:00
asp中去除html中style,javascript,css代码
2011-02-16 11:18:00
ASP 连接mysql信息(strConnString)
2009-10-29 12:02:00
my.ini(my.cnf)与mysql优化指南
2009-12-15 16:20:00
SQL“多字段模糊匹配关键字查询”
2008-04-24 14:16:00
asp利用XmlHttp和Adodb.Stream采集图片
2007-12-06 18:42:00
ASP函数大全(数字函数)
2009-06-01 12:33:00
大牌 Banner 设计欣赏(468x60)
2008-01-20 13:02:00
如何增强网站数据库Access文件的安全性
2008-11-13 16:58:00
ASP防盗链及防下载的方法
2007-09-19 12:22:00
关于大批量数据高效插入方法
2010-07-31 19:07:00
优化MySQL数据库性能的八大“妙手”
2007-11-18 14:49:00
修改Linux下MySQL 5.0的默认连接数
2009-09-01 10:16:00
WEB2.0网页制作标准教程(4)如何调用css样式表
2007-11-13 13:26:00
动态导航设计
2008-09-21 13:40:00
Oracle SecureFile的功能第1/4页
2009-06-19 18:07:00
纯CSS在Firefox模拟text-overflow: ellipsis效果
2009-03-17 12:49:00
页面新开窗口的一点补充
2008-09-10 12:57:00