先看效果：

代码如下：

*{margin:0;padding:0;}html{background:url('p_w_picpaths/bg_tile.jpg') #333d43;}body{background:url('p_w_picpaths/bg_head.jpg') repeat-x top center, url('p_w_picpaths/bg_vert.jpg') repeat-x;min-height:500px;font:14px/1.3 'Segoe UI',Arial, sans-serif;color:#888;padding:10px;}a, a:visited {text-decoration:none;outline:none;color:#54a6de;}a:hover{text-decoration:underline;}/*----------------------------CSS3 Animated Navigation-----------------------------*/.fancyNav{overflow:hidden;display:inline-block;margin:160px auto;}.fancyNav li{background-color:#f0f0f0;background-p_w_picpath:-webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));background-p_w_picpath:-moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-p_w_picpath:-o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-p_w_picpath:-ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);background-p_w_picpath:linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);border-right:1px solid rgba(9, 9, 9, 0.125);box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;-moz-box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;-webkit-box-shadow:1px -1px 0 rgba(255, 255, 255, 0.6) inset;position:relative;float:left;list-style:none;}.fancyNav li:after{content:'.';text-indent:-9999px;overflow:hidden;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;opacity:0;background-p_w_picpath:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));background-p_w_picpath:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-p_w_picpath:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-p_w_picpath:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));background-p_w_picpath:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-transition:0.25s all;-webkit-transition:0.25s all;-o-transition:0.25s all;transition:0.25s all;}.fancyNav li:first-child{border-radius:4px 0 0 4px;}.fancyNav li:first-child:after,.fancyNav li.selected:first-child:after{box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;border-radius:4px 0 0 4px;}.fancyNav li:last-child{border-radius:0 4px 4px 0;}.fancyNav li:last-child:after,.fancyNav li.selected:last-child:after{box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;border-radius:0 4px 4px 0;}.fancyNav li:hover:after,.fancyNav li.selected:after,.fancyNav li:target:after{opacity:1;}.fancyNav:hover li.selected:after,.fancyNav:hover li:target:after{opacity:0;}.fancyNav li.selected:hover:after,.fancyNav li:target:hover:after{opacity:1 !important;}.fancyNav li a{color:#5d5d5d;display:inline-block;font:20px/1 Lobster,Arial,sans-serif;padding:12px 35px 14px;position:relative;text-shadow:1px 1px 0 rgba(255, 255, 255, 0.6);z-index:2;text-decoration:none !important;white-space:nowrap;}.fancyNav a.homeIcon{background:url('p_w_picpaths/home.png') no-repeat center center;display:block;overflow:hidden;padding-left:12px;padding-right:12px;text-indent:-9999px;width:16px;}

HTML代码如下：

字体如：

<!-- 其中包括从谷歌的字体目录龙虾字体 -->

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

<!-- 启用Internet Explorer的支持HTML5-->

<!--[if lt IE 9]>

 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->