CSS 3 下拉菜单
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
预览
下面的图片展示出如果浏览器不支持 CSS3 时菜单将是什么的样子.
使用了一个渐变图片
一个由白色过渡到透明的图片被用来实现渐变效果. 因为新的 CSS3 渐变特性还没有被所有浏览器支持, 渐变的背景图片是更保险的选择.
渐变的强度可以通过更改图片的上下偏移量来实现. 并且渐变颜色可以简单地通过更换背景颜色来实现.
CSS 代码
我不会逐行地解释 CSS 代码. 但会在下面的图片中将重点标出, 说明这个下拉菜单是这样编写出来的.
译者的话
昨天翻译了《CSS 基础知识》一文, 因为没有实例觉得不完整, 自己对 CSS3 的了解确实有限, 所以厚着脸再翻译了这位同学较早前的一个文章. 文中内容同样通俗易懂, 效果相当好而且实用.
原文链接: CSS3 Dropdown Menu
最近 CSS3 说得很火, 近如咫尺, 但是鄙人认为这是一个假象, CSS3 要普及还需要经历一个悠长而曲折的阶段. 在为 CSS3 欢呼的同时, 我们不能否认 CSS2 的可用性更高. 我认为 Windows XP 和 Vista 离场的时候将是 CSS3 普及之时, 而在 PC 之前, Mobile Phone 可能会捷足先登.
文章来源：http://www.neoease.com/css3-dropdown-menu/
