一个导航菜单_html/css_WEB-ITnose

  	 		 		 CSS制作立体导航 				 			body{			  background: #ebebeb;			}			.nav{			  width:560px;			  height: 50px;			  font:bold 0/50px Arial;			  text-align:center;			  margin:40px auto 0;			  background: #f65f57;			 /*制作导航圆角*/			  border-radius: 8px;			 /*制作导航立体效果*/			  box-shadow: 0 7px 0 #ba4a45;			}			.nav a{			  display: inline-block;				-webkit-transition: all 0.2s ease-in;				-moz-transition: all 0.2s ease-in;			   -o-transition: all 0.2s ease-in;			   -ms-transition: all 0.2s ease-in;			   transition: all 0.2s ease-in;			}			.nav a:hover{			  -webkit-transform:rotate(10deg);			  -moz-transform:rotate(10deg);			  -o-transform:rotate(10deg);			  -ms-transform:rotate(10deg);			  transform:rotate(10deg);			}			.nav li{			  position:relative;			  display:inline-block;			  padding:0 16px;			  font-size: 13px;			  text-shadow:1px 2px 4px rgba(0,0,0,.5);			  list-style: none outside none;			}			/*制作导航分隔线效果*/			.nav li::before,			.nav li::after{			  content:"";			  position:absolute;			  top:14px;			  height: 25px;			  width: 1px;			}			.nav li::after{			  right: 0;			  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			}			.nav li::before{			  left: 0;			  background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			}			/*删除导航第一个导航项左边的分隔线*/			.nav li:first-child::before{			  background: none;			}			/*删除导航最后一个导航右边的分隔线*/			.nav li:last-child::after{			  background: none;			}			.nav a,			.nav a:hover{			  color:#fff;			  text-decoration: none;			}		 	 	 		 		 Home 		 About Me 		 Portfolio 		 Blog 		 Resources 		 Contact Me 		 	   

查看更多关于一个导航菜单_html/css_WEB-ITnose的详细内容...