代码实现导航栏分割线_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:35:52

2329人浏览过

来源于php中文网

原创

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

一览妙笔

自媒体、编剧、营销人员写作工具

下载

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