CSS - 具有水平渐变的垂直边框

Question

我有一个漂亮的垂直分隔线，对于我页面的某些部分有一个水平渐变，它的工作非常出色。这只是一个图像文件，我将其作为居中背景应用于图层并将其浮动到那里以获得我想要的效果。

这很好用，但是我想尝试将它做到表格单元边框，这样它就可以减少那边并且一直向下发出轻微的渐变效果。这可能与CSS3一起使用吗？

我稍微探讨了This post，看起来这种技术似乎是可行的，但是试图将这些渐变添加到border属性会不断出现失败。

这种效果是否涉及特定的技术？

更新

小jsFiddle演示当前分频器的工作原理，以及我在普通表中尝试应用它的地方以及我尝试时会发生什么。

jsFiddle

Answer 1

扩展上述评论...... 可以通过在容器div上使用伪元素来模仿此效果。我认为在你的情况下，它可能比尝试在桌面边框上实现更好。例如，一个名为“box”的包装div或您喜欢的任何类名...

.box:before,
.box:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  width: 1px;
  height: 50%;
}

.box:before {
  top: 0;
  background: linear-gradient(to top, #333 0%, transparent 100%);
}

.box:after {
  bottom: 0;
  background: linear-gradient(to bottom, #333 0%, transparent 100%);
}

检查DEMO。 另外，请不要忘记在background: linear-gradient上添加供应商前缀，以使其成为跨浏览器。