如何创建径向css3边框渐变阴影

Question

我有两列可以伸展到可变高度，设计师希望在两列之间有一个阴影，但正如您所看到的那样，图像在顶部和底部淡出。这意味着我不能只使用在右侧列中左对齐的css来使用背景图像。

那么我可能会使用具有径向渐变的css 3边框阴影。我可能会使用表格单元格来执行此操作，因为我需要将阴影拉伸到最高列的高度。我该怎么做？

Answer 1

以前的答案并没有真正回答你的问题：“如何创建径向css3边框渐变阴影”

您可以使用径向渐变来模拟没有图像的边框阴影。

演示：http://jsfiddle.net/sonic1980/wRuaZ/

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
                                    |       |        |        |
                                    |       |        |        +--> color end     
                                    |       |        +--> color start
                                    |       +--> size of gradient ellipse (x-axis, y-axis)
                                    +---> position of ellipse center

很容易修改以使其垂直或使用：before或：after伪类。

另一个示例是带有阴影的<hr>标记：http://jsfiddle.net/sonic1980/65Hfc/

Answer 2

我有一个建议，你不需要使用css3，你可以使用两个不同的类，一个是正常的，另一个是背景。当加载页面完成，并调用js方法，settimeout为dely几秒钟，切换类。

Answer 3

我想我只是要使用图像，并在div上设置最小高度： - ）

.column.right {
  padding-left: 30px;
  background: url(/img/shadow.png) no-repeat left top;
  min-height: 265px;
}

Answer 4

另一个解决方案实际上允许动态高度列，但它只支持IE8 +。

您要做的是将background-image应用于最高列的边缘。然后，您可以使用分别设置为:before和:after的{​​{1}}定位的absolute和top:0;伪元素来设置阴影上的“上限”。

这有意义吗？这是一个JSFiddle，使用边框和文字显示它，而不是图像。

当然，JSFiddle中bottom:0的{​​{1}}参数并不重要;它可能是height或不存在。我只是将其设置为div一些大小。