CSS3 Background-image和Gradient 制作菜单分隔竖线

我们想要的效果：

通常我们为一个菜单设置分隔线的时候，会想到用 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;
}

这样，终于可以得到想要的效果了：

CSS3 Background-image和Gradient 制作菜单分隔竖线

Background-image和Gradient 制作菜单分隔竖线。

推荐阅读更多精彩内容