CSS 3 下拉菜单

制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.

查看 CSS3 下拉菜单演示页面

  预览    

下面的图片展示出如果浏览器不支持 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/