渐变与为元素

如何使用渐变与伪元素制作导航分割线

小程序缘

2017-01-25

源自：十天精通CSS3 5-5

关注问题我要回答

771

操作

收起

1 回答

祺妙Tony
2017-01-26

分别使用before和after在导航节点前后都加上伪元素，设置上不同颜色，这样前一个节点的after和后一个节点before贴在一起组成的分割线会好看。
分割线两边透明，中间不透明，渐变；
去掉最前面节点的before和最后面节点的after，导航完成。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
 background: #ebebeb;
}
.nav{
 width:560px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0; 
     background: #f65f57;
 /*制作圆*/
 border-radius:5px;
          /*制作导航立体风格*/
          box-shadow:0 5px #b64b41;
}
.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;
   width:1px;
   height:25px;
}
.nav li::before{
   left:0;
   background:-moz-linear-gradient(to top,#f65f57,#9e3e3a 50%,#f65f57);
   background:-webkit-linear-gradient(to top,#f65f57,#9e3e3a 50%,#f65f57);
   background:-o-linear-gradient(to top,#f65f57,#9e3e3a 50%,#f65f57);
   background:-ms-linear-gradient(to top,#f65f57,#9e3e3a 50%,#f65f57);
   background:linear-gradient(to top,#f65f57,#9e3e3a 50%,#f65f57);
}
   .nav li::after{
       right:0;
       background:-moz-linear-gradient(to top,rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
       background:-webkit-linear-gradient(to top,rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
       background:-o-linear-gradient(to top,rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
       background:-ms-linear-gradient(to top,rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
       background:linear-gradient(to top,rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
   }
        /*删除第一项和最后一项导航分隔线*/
.nav li:first-child::before,
.nav li:last-child::after {
   background:none;
}

.nav a,
.nav a:hover{
 color:#fff;
 text-decoration: none;
}

</style>
</head>
<body>
<ul>
     <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>