HTML5/CSS3菜单特效代码，实现了阴影+发光+圆角效果，实属不错，不过IE8下看不到效果，期待IE8快点兼容css3啦。本效果代码简洁，还可继续优化完善，要的就拿去哦。

1  2  3  4 
       5  6 52 53 54 
      
       55 
       
源码爱好者
56 
       
技术文章
57 
       
网页特效
58 
       
精品源码
59 
       
下载排行
60 
       
最新更新
61 
       
回到首页
62 
      63 64 

 

效果截图：

代码分析：

我们拖动ul到HTML后，默认的样式有点。没有文字阴影，渐变背景，没有边框阴影。

当我们去掉点过后（list-style: none;），不让原先点的位置仍然占宽（padding: 0px;），我们又想让ul里的元素们都能一行显示（display: inline;）。感觉这些都视乎很简单。那么我们真正要实现文字阴影、渐变背景和边框阴影又怎么做呢？

世间无难事，只怕不懂CSS。

其实CSS3已经有了可以设定文字阴影，渐变背景和边框阴影的标签。

文字阴影：

text-shadow:5px 2px 5px #FFFFFF;

渐变背景：

background: #37578C;

background: -webkit-linear-gradient(#37578C, #002B46, #608BAE);

background: -moz-linear-gradient(#37578C, #002B46, #608BAE);

background: -ms-linear-gradient(#37578C, #002B46, #608BAE);

background: -o-linear-gradient(#37578C, #002B46, #608BAE);

background: linear-gradient(#37578C, #002B46, #608BAE);

边框阴影：

box-shadow: 2px 2px 5px #FFFFFF;

 

初次特效外，还有什么圆角(border-radius: 5px 5px 0px 0px;当然也要考虑浏览器差异，类似渐变背景的写法。)

感觉这些特效，已经能基本满足我们日常设计中的基本需求了。什么3D样式的按钮等等。

后边继续跟进研究CSS3在3D效果的体验上的做法。

欢迎关注 ~