如何使用css打破带有图像或颜色的无序链接列表

Question

我想要做的是使用白色图像拆分/中断无序列表中的每个元素，使其看起来像这样：

我有白色图像，但我应该如何使用CSS？

Answer 1

为border-right元素添加li，然后使用:last-child选择器删除最后一个元素（以避免在最后一个元素的右边有白色边框，因为之后没有其他的列表元素。

li{
    border-right: 2px solid #fff;
}

li:last-child{
    border-right: none;
}

小提琴：http://jsfiddle.net/h8z1gcLc/

Answer 2

您可以使用:after向所有li添加:not(:last-child)：伪元素，但最后一个使用body { background: #222; } .nav-container { top: 20px; position: relative; width: 100%; height: 30px; } .nav { list-style: none; padding: 0; width: 100%; height: 30px; margin: 0 auto; text-align: center; } li { display: inline-block; } .menu-item { position: relative; display: inline-block; width: 60px; padding: 10px 30px; color: #FFFFF6; text-shadow: 0 0 2px #FFFFF6; background: linear-gradient(to top, #423930, #A09B95); z-index: -1; } .nav li:not(:last-child) .menu-item:after { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: 1px; background-color: white; box-shadow: 0 0 5px 0px #FFFFF6; }。

<div class="nav-container">
  <ul class="nav">
    <li><a id="menu-item-1" class="menu-item">Home</a></li
    ><li><a id="menu-item-2" class="menu-item">Register</a></li
    ><li><a id="menu-item-3" class="menu-item">Download</a></li>
  </ul>
</div>

{{1}}