|
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
查看 CSS3 下拉菜单演示页面
预览下面的图片展示出如果浏览器不支持 CSS3 时菜单将是什么的样子.
使用了一个渐变图片
一个由白色过渡到透明的图片被用来实现渐变效果. 因为新的 CSS3 渐变特性还没有被所有浏览器支持, 渐变的背景图片是更保险的选择.
渐变的强度可以通过更改图片的上下偏移量来实现. 并且渐变颜色可以简单地通过更换背景颜色来实现.
CSS 代码
我不会逐行地解释 CSS 代码. 但会在下面的图片中将重点标出, 说明这个下拉菜单是这样编写出来的.
|
