代码实现导航栏分割线

无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。
.nav1{
              width:auto;
              height:50px; 
              text-align:center;
              margin:13px auto 0;
            }

            .nav1 a{
              display: inline-block;
     text-decoration:none;
          }

            .nav1 a:hover{
          color:#09109e;
    border:6px none #fff;
   font-weight:bold;
  
            }
  
            .nav1 li{
              position:relative;
            }
       /*制作导航分隔线效果*/
            .nav1 li::before,
            .nav1 li::after{
              content:"";
              position:absolute;
              top:-5px;
              height: 40px;
              width: 1px;
            }
            .nav1 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));
            }
            .nav1 li::before{
              left: 0;
              background: -moz-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -webkit-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -o-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -ms-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
            }
            /*删除导航第一个和最后一个分隔线*/ 
     .nav1 li:first-child::before{
                display: none;
                }
      .nav1 li:last-child::after{
              display: none;
            }

转载于:https://www.cnblogs.com/Zmmy/p/8536542.html