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

我有两个可以拉伸到不同高度的柱，设计师希望在这两个柱之间有一个阴影，但是你可以看到图像在顶部和底部逐渐消失。这意味着我不能只使用css的背景图像，它在右边的列中是左对齐的

---

所以我想也许我可以使用css3边界阴影，它有一个径向渐变。我可能会使用表格单元格来实现这一点，因为我需要阴影延伸到最高列的高度。如何做到这一点？

我建议您不需要使用css3，您可以使用两个不同的类，一个是普通类，另一个是背景类。当加载页面完成时，调用js方法，设置超时以延迟几秒钟，切换类

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

---

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

您要做的是将一个

背景图像

定位到最高列的边缘。然后您可以使用

：before

和

：after

伪元素，设置为

绝对
定位
顶部：0
和
bottom:0
分别设置阴影的“上限”

这有意义吗？这是一个使用边框和文本而不是图像来显示它的示例

当然，JSFiddle中的
div
的
height
参数是无关紧要的；它可以是
min height
或不存在。我只是将其设置为给
div
一些大小。
前面的答案并不能真正回答您的问题：“如何创建径向css3边界渐变阴影”

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

演示：


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

另一个例子是，带有阴影的
标记：
那么，后面和前面的动作是否会像遮罩一样，并使用背景图像使阴影变细？这很酷：）你也可以只添加额外的div，减少语义，仍然使用绝对位置。是的，你有这个想法。使用更多的
div
s会使它失去其语义能力，但确实会给它更深的
IE
支持，这可能是值得的！回答很好，Peter，但对浏览器的要求相当严格：）将
-webkit-
…线替换为
径向梯度（椭圆最远侧为50%0%，rgba（0，0，0，0.3）0%，rgba（0，0，0，0）100%）
以标准和跨浏览器的方式工作。
.column.right {
  padding-left: 30px;
  background: url(/img/shadow.png) no-repeat left top;
  min-height: 265px;
}

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