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 网页下拉菜单代码解释 中文翻译

英文原稿:CSS3 Dropdown Menu | WebDesignerWall

HTML / CSS 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 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
php 什么是PEAR?
2009/03/19 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
jquery 学习笔记一
2010/04/07 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python yield使用方法示例
2013/12/04 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python的等深分箱实例
2019/11/22 Python
python实现随机加减法生成器
2020/02/24 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
大学生涯自我鉴定
2014/01/16 职场文书
驾驶员岗位职责
2014/01/29 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
航班延误投诉信
2015/07/02 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis