无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。

 

    .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;

            }