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

Question

我有一个漂亮的垂直分隔线，它在我的页面的某些部分有一个水平渐变，而且效果很好。这只是一个图像文件，我将其作为居中背景应用到图层并将其 float 在那里以获得我想要的效果。

这很好用，但我想尝试对表格单元格边框执行此操作，这样它会减少那一侧并一直向下提供轻微的渐变效果。这在 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 上添加您的供应商前缀，以使其跨浏览器。