需要一个带有边框图像渐变的小技巧

Question

我真的希望有人可以帮忙解决这个问题。我有一个ul li无序列表的事情，正在应用以下css：

ul li {
  float: left;
  /* border-right: 2px solid white; */
  border-width: 0px;
  border-right-width: 2px;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
}

ul li:last-child {
  border: 0;
} 

到目前为止，我设法为导航条块实现了以下效果：

* HOWEVER（!!），这是理想的结果：

我知道拥有这些边框似乎很奇怪 - 但它给了我所需的厚度，客户想要一些时髦的悬停效果。希望有人能帮忙......

我需要了解的是如何将透明的顶部和底部部分带入......