2

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

此处的图像示例

这很好用，但我想尝试对表格单元格边框执行此操作，以便它削减那一侧并一直向下提供轻微的渐变效果。这可能与 CSS3 吗？

我已经对这篇文章进行了一些探索，看起来这种技术是可行的，但是试图将这些渐变添加到border属性中总是会失败。

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

更新

小 jsFiddle 来演示当前分隔线的工作原理，以及我试图在普通表中应用它的位置以及尝试时不断发生的情况。

jsFiddle

4

1 回答 1

4

从上面的评论扩展...可以通过在容器 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%);
}

检查这个演示。也不要忘记添加您的供应商前缀background: linear-gradient以使其跨浏览器。

于 2013-09-28T19:10:23.630 回答