需要使用边界图像渐变进行一些CSS技巧

我真的希望有人能帮上忙。我有一个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;
} 

到目前为止，我已经为导航栏块实现了以下效果：

*然而（！！），这是期望的结果：

我知道有这样的边界看起来很奇怪，但它给了我想要的厚度，客户想要一些时髦的悬停效果。希望有人能帮忙

---

我需要了解的是如何在…

粘贴html中提供透明的顶部和底部部分，以方便其他人。@shahid我不能这样做，因为我使用的是Vue.js绑定-li来自for循环。提供完整的html/CSS代码（在浏览器中显示源代码，您将获得结构），以显示您的问题。提示：你可以通过背景渐变来伪装一个背景，并通过背景大小来调整它们的大小。这里有两个我的老演示来展示这个想法&还有第三个。。。非常基本你的想象力会做得很好，然后尝试Css伪之后和之前为你的边界，并保持边界不透明。