CSS Sprites + 圆角[译]
作者：板凳 来源：译言 发布时间：2009-05-08 16:10:00
初步介绍
当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。
本地下载：
demo-rounded-corners.zip （10.01 KB）
您还可以参考一下文章：
43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
我们将怎样来处理?
我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:
是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?
通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.） 这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我 之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!
第一步: 创建我们的 Sprite
1、为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
2、切割并且导出圆角到本地临时位置 (我们将会在之后用到).
3、新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。 
4、合成四个圆角为一张图片, 并用 1px 的红线 来区分它们. 
5、导出合成图片，sprite 也就大功告成了。
0
投稿猜你喜欢
- 1969年8月8日，在北京协和医院降生了一个漂亮的小女孩。接生的阿姨说，她的声音这么大，好象想要全世界的人都听到。后来，她的父亲为她取了一个
- PNG格式以支持透明和无损，且相对大小适中，已成为现在网页中图片运用的主流。有些时候我们在制作网页时使用PNG格式图片，用IE浏览器查看却无
- JS获取网页中HTML元素的几种方法分析：getElementById getElementsByName getElementsByTag
- 调用 <script language="javascript" src="xxx.asp?m
- 嗯，开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会，同时也让我收获颇丰。在群里聊天的时候也提到过，所有的学习过程，最好是理论－
- InnoDB和MyISAM是在使用MySQL最常用的两个表类型，各有优缺点，视具体应用而定。下面是已知的两者之间的差别，仅供参考。1.Inn
- 在这里我想有必要再较系统说一下ADO的各种对象的方法、属性。毕竟ADO不仅应用在ASP中，VB,VC都可以用到。在这十天中我想主要提到的对象
- 为了顺利的开发一个多语言的国际化J2EE程序，需要修改数据库字符集，我的做法如下：安装 MySq时选择字符集为UTF-8修改MySql安装目
- 如题在SQL中 SELECT ... FROM ... ORDER BY abc ASC; 如果abc是字符串，那么结果会按照a-z 中文按
- 相信大家从去年圣诞节开始，逐渐发现淘宝网首页的标志开始有了新的形式，从过往的静态图片节日LOGO变成了FLASH的动画小故事LO
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 锚点是“top”，可以放在页面的任何位置，一般是页首。程序就是对锚点出现的判断，我设置的数值是4，意思是出现4个动态数据就出现一个锚点，少于
- Oracle中有多种方法可以向数据库或服务器文件系统上载文件，这里主要介绍如下三种：Oracle HTTP Server（OHS）的mod_
- 众所周知windows平台漏洞百出，补丁一个接一个，但总是补也补不净。我把我所知道的看asp源码的方法总结了一下，并且用c#写了个应用程序来
- Oracle 背景资料 在介绍 Oracle9i 之前我们先介绍一些关于Oracle 公司的资料，让各位朋友更多了解 Oracle。 197
- 一、问题描述当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用inp
- js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,
- 各人觉得这些LOGO的设计都很好，简洁，明了，大方。特整理出来与大家分享，希望能吸取设计经验。asp之家祝愿各位09年身体健康，万事如意，网
- 社会上的任何人，都不愿意自己给人留下难以交往的印象，就算是那些冷漠、寡情的人他们也在不断地寻求一种通道，达到与他人的交流和沟通。如果，在你与
- 任意给出一个数,求该数以内的所有质数.(使用筛选法做的)先看看什么叫做质数？质数的定义：一个大于1的自然数，除了1与它自身外，再没有其它的正
