我们想要的效果：
通常我们为一个菜单设置分隔线的时候，会想到用 border-right 或者border-left 来实现：
border-right:1px solid gray;
不过这种方法制作的分隔线，我们可以改变它的线宽、线型、颜色，却没法改变它的长度。这时候我们可以想到另一个方法：
Background-image和Gradient 制作菜单分隔竖线。
首先，看看它的HTML结构：
<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;
到这里我们再给它添加一个背景色，就能发现，<a>元素之间存在间隔。
background: #fce;
*在我们接着往下绘制线条的时候，先要解决这个问题，首先，为什么会有空格呢？
原因就是标签段之间的空格，那么怎么解决这个问题呢？
1. 去掉HTML中的空格，自然间距就没有了。
<div class="one">
<a href="#">
Home</a><a href="#">
Hello</a><a href="#">
Hello</a><a href="#">
Hello</a>
</div>
2. margin负值
margin负值的大小与上下文的字体和文字大小相关，由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
在本利中设置的是：margin:-4px;
3. 去掉闭合标签
为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。
<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; /*这个数值在本例中是最合适的*/
}
.one a {
letter-spacing:0;
}
6. 使用word-spacing
.one {
word-spacing:-4px;
}
.one a {
word-spacing:0;
}
解决了空格的问题之后，我们就可以用 Gradient 为元素添加背景图片了，而这个宽度只有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; /*线条所在位置为垂直居中*/
}
此时我们发现，第一个菜单的前面也有一根线，我们需要把它去掉，利用 first-child 选择器选中它，把它的背景去掉，就好了：
.one>a:first-child{
background:none;
}
这样，终于可以得到想要的效果了：
