也谈网页圆角的背景图法（2）
作者：大伟 来源：大伟blog 发布时间：2009-03-19 14:09:00
标签：css教程,背景,圆角
3、以上是一般网站局部使用圆角的常见处理方法，但如果是整站的UI都很圆的话，显然上面2个常见的方法就不是很好用了，到处都是圆角，高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。
同样是基于这种“九宫格”处理的思想，在代码实现上各个网站也有各自的招。
1、头、尾各用3个标签(div or span)来实现圆角，中间直接用border-left、border-right属性来补2边。
2、用一个很大很大的圆角图片，然后来个若干层div嵌套实现，道理和最上面说的拉长高度和拉长宽度是一样的，它这个是双向无限拉长，比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。
3、图太大了，总难免是有点舍不得用的，那就用小图，看淘宝网首页的，实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后，再额外地向4个角加上一张小图片去补圆，它这个做法，除了图片是小的之外，在网页加载背景图之前，也是有一个比较好的视觉呈现的。示意图如下：
具体代码请看例子。
0
投稿猜你喜欢
- 在我们设计网页的时候，总会遇到一些不愉快的事情，最常见的莫过于在后台添加内容后才发现显示的页面被撑开，导致网页极度不美观。以前大
- 我相信站长们做网站的最终目的还是想要获得收入的，我想象站长们大部分的都做Google的联盟的，我相信站长中大部分的人都有考虑过做英文站的，但
- 插入一条记录后，如何得到最新的自动增加ID？我们要用到SQL Server的@@IDENTITY。它能够记录下系统最近使用的一个IDENTI
- 1、通过探测Flash Player的版本，来决定显示Flash内容还是替换内容，避免了过时的Flash插件影响Flash内容的正常显示。2
- 一般我们能过VS2005的SQL explorer来添加一个本地的MDF文件。也许你可能会出现下面这个问题：Exception Detail
- 如何修改被表单引用的ASP页面？formhandler.asp<HTML><BODY BGCOLOR="
- 将转储设备加入到SQL Server备份数据库的地方。在SEM中转储设备是可见性的，并且在设备上的信息被存储在主要数据库的sysdevice
- 1.已知有一个XML文件（bookstore.xml）如下： <?xml version="1.0" e
- 最近因项目需要用ACCESS做数据库开发WEB项目看论坛上还许多人问及ACCESS被注入的安全问题许多人解决的方法仍然是用Replace替换
加入CDC的这段日子里，工作中积累的小心得都密密麻麻的收在册子里。恰逢近期的校园招聘正如火如荼的展开着，借此机会，我把这一些不太成熟的小想法- 最近在D4得到一本(美) Penny Mcintire写的《Visual Design for the Modern Web》.突然觉得可用
- 用mysqlbinlog.exe查看二进制日志是否启用了日志mysql>show variables like 'log％&#
- 现在Ajax是一个相当火的东西，那么Ajax是什么呢？我的理解Ajax就是一个工具，就是一个客户端的技术，不管用何种服务器端技术都可以用Aj
- MySQL安装文件已被广泛应用但是也在不断的更新，这里介绍MySQL安装文件设置使用，帮助大家安装更新MySQL安装文件系统。Fedora5
- Oracle数据库作为大型数据库管理系统，近年来一直占有世界上高端数据库的最大份额，其强大而完善的数据库管理功能，以及ORACLE公司推陈出
- 准备在以后制作的网站中尝试一些变化，比如：先提交内容，后提示注册/登陆。感觉这样可以绑架更多用户……不想注册再发言？那就先让你上钩发言，然后
- MySQL目前不支持列的Default 为函数的形式,如达到你某列的默认值为当前更新日期与时间的功能,你可以使用TIMESTAMP列类型下面
- XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。
- 近日，有关微软Open XML标准的问题又引发了某些业内人士的关注。其一是因为日前ISO（国际标准组织）成员南非和巴西相继就ISO批准微软的
- 需要写个js滑动展开折叠（收缩）的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： <
