基于CSS3制作立体效果导航菜单

2020-05-05 07:32:32易采站长站整理

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:first-child::before{    
background-image:none;    
}    
/*使用伪元素制作导航列表项分隔线*/    
.nav li:before{    
content:"";    
color:#666;    
position:absolute;    
top:18px;    
height:20px;    
left:-1px;    
width:1px;    
background-image:linear-gradient(to bottombottom,#f65f57,#993333,#f65f57);    
}    
</style>    
</head>    
<body>    
<ul class="nav">    
<li><a href="">Home</a></li>    
<li><a href="">About Me</a></li>    
<li><a href="">Portfolio</a></li>    
<li><a href="">Blog</a></li>    
<li><a href="">Resources</a></li>    
<li><a href="">Contact Me</a></li>    
</ul>    
</body>    
</html>