我們想要的效果：
通常我們?yōu)橐粋€(gè)菜單設(shè)置分隔線的時(shí)候来氧，會(huì)想到用 border-right 或者border-left 來(lái)實(shí)現(xiàn)：
border-right:1px solid gray;
不過(guò)這種方法制作的分隔線堡称，我們可以改變它的線寬弛秋、線型锋喜、顏色尾序，卻沒(méi)法改變它的長(zhǎng)度亥啦。這時(shí)候我們可以想到另一個(gè)方法：
Background-image和Gradient 制作菜單分隔豎線。
首先耳幢，看看它的HTML結(jié)構(gòu)：
<div class="one">
<a href="#">Home</a>
<a href="#">Hello</a>
<a href="#">Hello</a>
<a href="#">Hello</a>
</div>
先給它添加基本的CSS樣式:
font-size:24px;
color:#8ce;
text-decoration:none;
padding:0 20px;
到這里我們?cè)俳o它添加一個(gè)背景色岸晦，就能發(fā)現(xiàn)欧啤，<a>元素之間存在間隔。
background: #fce;
*在我們接著往下繪制線條的時(shí)候启上，先要解決這個(gè)問(wèn)題邢隧，首先，為什么會(huì)有空格呢冈在？
原因就是標(biāo)簽段之間的空格倒慧，那么怎么解決這個(gè)問(wèn)題呢？
1. 去掉HTML中的空格包券，自然間距就沒(méi)有了纫谅。
<div class="one">
<a href="#">
Home</a><a href="#">
Hello</a><a href="#">
Hello</a><a href="#">
Hello</a>
</div>
2. margin負(fù)值
margin負(fù)值的大小與上下文的字體和文字大小相關(guān)，由于外部環(huán)境的不確定性溅固，以及最后一個(gè)元素多出的父margin值等問(wèn)題付秕，這個(gè)方法不適合大規(guī)模使用。
在本利中設(shè)置的是：margin:-4px;
3. 去掉閉合標(biāo)簽
為了向下兼容IE6/IE7等喝蒙牛長(zhǎng)大的瀏覽器侍郭，最后一個(gè)列表的標(biāo)簽的結(jié)束（閉合）標(biāo)簽不能丟询吴。
<div class="one">
<a href="#">Home
<a href="#">Hello
<a href="#">Hello
<a href="#">Hello</a>
</div>
在HTML5中，我們可以直接：
<div class="one">
<a href="#">Home
<a href="#">Hello
<a href="#">Hello
<a href="#">Hello
</div>
4. 為父元素添加 font-size:0亮元；如下
.one {
font-size:0;
}
.one a {
font-size:24px;
}
5. 使用letter-spacing
.one {
letter-spacing:-4px; /*這個(gè)數(shù)值在本例中是最合適的*/
}
.one a {
letter-spacing:0;
}
6. 使用word-spacing
.one {
word-spacing:-4px;
}
.one a {
word-spacing:0;
}
解決了空格的問(wèn)題之后猛计，我們就可以用 Gradient 為元素添加背景圖片了，而這個(gè)寬度只有1px 的線條就是我們的分隔線了爆捞。
.one {
font-size:0
}
.one a{
color:#8ce;
text-decoration:none;
font-size:24px;
padding:0 20px;
background:linear-gradient(gray,gray) no-repeat;
background-size:1px 40%; /*制定了線寬為 1px奉瘤；線高為背景高度的40%；*/
background-position:0 center; /*線條所在位置為垂直居中*/
}
此時(shí)我們發(fā)現(xiàn)煮甥，第一個(gè)菜單的前面也有一根線盗温，我們需要把它去掉，利用 first-child 選擇器選中它苛秕，把它的背景去掉肌访，就好了：
.one>a:first-child{
background:none;
}
這樣，終于可以得到想要的效果了：
