php怎么实现网页分割线,代码实现导航栏分割线_html/css_WEB-ITnose

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

}