编程 HTML / CSS

CSS3 网页下拉菜单代码解释中文翻译

Posted in HTML / CSS onFebruary 27, 2010

当我在为 WordPress 编写 Notepad 主题时，顺道学习了一些新的 CSS3 特性，现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单，使用 border-radius，box-shadow 和 text-shadow 创建。在 Firefox，Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器，也可以正常呈现页面，只不过忽略了对圆角和阴影的渲染。

查看演示：http://www.webdesignerwall.com/demo/css3-dropdown-menu

预览

下图展示了不兼容 CSS3 情况下的菜单样式。
CSS3 网页下拉菜单代码解释中文翻译
使用了一个渐变图像

白色透明的图像用于实现渐变效果。因为新的 CSS3 渐变特性还没有得到所有浏览器的支持，使用简便背景图片更为安全。

CSS3 网页下拉菜单代码解释中文翻译
渐变的强度可以通过切换背景图像的上移或下移来改变。此外，渐变颜色可以很容易地通过改变背景颜色来调整。

CSS3 网页下拉菜单代码解释中文翻译

CSS 代码

我不打算解释逐行解释 CSS 代码。下面的图片很好地解释了编写下拉菜单的关键点。

CSS3 网页下拉菜单代码解释中文翻译

英文原稿：CSS3 Dropdown Menu | WebDesignerWall

CSS3 网页下拉菜单代码解释中文翻译

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

纯CSS3实现地球自转实现代码(图文教程附送源码)

Dec 26 HTML / CSS

详解CSS3中使用gradient实现渐变效果的方法

Aug 18 HTML / CSS

使用CSS3来实现滚动视差效果的教程

Aug 24 HTML / CSS

CSS3制作炫酷的自定义发光文字

Mar 28 HTML / CSS

详解CSS3+JS完美实现放大镜模式

Dec 03 HTML / CSS

HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形

Jun 23 HTML / CSS

一款html5 canvas实现的图片玻璃碎片特效

Sep 11 HTML / CSS

HTML5所有标签汇总及标签意义解释

Mar 12 HTML / CSS

详解HTML5中rel属性的prefetch预加载功能使用

May 06 HTML / CSS

HTML5拖拉上传文件的简单实例

Jan 11 HTML / CSS

Html5嵌入钉钉的实现示例

Jun 04 HTML / CSS

boostrap modal 闪现问题的解决方法

Sep 01 HTML / CSS

CSS3模块的目前的状况分析

Feb 24 #HTML / CSS

让IE可以变相支持CSS3选择器

Jan 21 #HTML / CSS

玩转CSS3色彩

Jan 16 #HTML / CSS

需要知道的CSS3动画技术

Jan 01 #HTML / CSS

CSS3 倾斜的网页图片库实例教程

Nov 14 #HTML / CSS

不同浏览器对CSS3和HTML5的支持状况

Oct 31 #HTML / CSS

检测用户浏览器是否支持CSS3的方法

Aug 29 #HTML / CSS

You might like

世界咖啡生产者论坛呼吁：需要立即就咖啡价格采取认真行动

2021/03/06 咖啡文化

php 魔术方法使用说明

2009/10/20 PHP

PHP 年龄计算函数(精确到天)

2012/06/07 PHP

php上传图片存入数据库示例分享

2014/03/11 PHP

Yii入门教程之Yii安装及hello world

2014/11/25 PHP

PHP中通过trigger_error触发PHP错误示例

2015/06/23 PHP

对比PHP对MySQL的缓冲查询和无缓冲查询

2016/07/01 PHP

yii2 上传图片的示例代码

2018/11/02 PHP

B/S模式项目中常用的javascript汇总

2013/12/17 Javascript

js判断某个方法是否存在实例代码

2015/01/10 Javascript

JS中setTimeout的巧妙用法前端函数节流

2016/03/24 Javascript

vue.js实现用户评论、登录、注册、及修改信息功能

2020/05/30 Javascript

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

2017/05/22 Javascript

NW.js 简介与使用方法

2018/02/01 Javascript

vue 实现锚点功能操作

2020/08/10 Javascript

[00:31]2016完美“圣”典风云人物：国士无双宣传片

2016/12/04 DOTA

python探索之BaseHTTPServer-实现Web服务器介绍

2017/10/28 Python

Linux上使用Python统计每天的键盘输入次数

2019/04/17 Python

Python对象转换为json的方法步骤

2019/04/25 Python

pycharm修改file type方式

2019/11/19 Python

pytorch forward两个参数实例

2020/01/17 Python

python传到前端的数据,双引号被转义的问题

2020/04/03 Python

UNIX命令速查表

2012/03/10 面试题

文明礼仪小标兵事迹

2014/01/12 职场文书

25岁生日感言

2014/01/13 职场文书

家居饰品店创业计划书

2014/01/31 职场文书

群众路线教育实践活动对照检查材料思想汇报（副处级领导）

2014/10/04 职场文书

教师批评与自我批评剖析材料

2014/10/16 职场文书

教师个人工作总结范文2014

2014/11/10 职场文书

2014年体育工作总结

2014/11/24 职场文书

2016年寒假社会实践活动总结

2015/03/27 职场文书

专职安全员岗位职责

2015/04/11 职场文书

2015年庆祝国庆节66周年演讲稿

2015/07/30 职场文书

幼儿园心得体会范文

2016/01/21 职场文书

2019年家电促销广告语集锦

2019/10/21 职场文书

Python中使用subprocess库创建附加进程

2021/05/11 Python

CSS3 网页下拉菜单代码解释 中文翻译

CSS3 网页下拉菜单代码解释中文翻译