如何创建一个径向的CSS3边框渐变阴影

Question

我有两列可以自适应高度，设计师想在两列之间添加阴影，但是你能看到图片在顶部和底部逐渐淡出。这意味着我不能简单地使用左对齐的背景图像来实现。因此，我想也许可以使用具有径向渐变的CSS 3边框阴影。我可能会使用表格单元格来做这件事，因为我需要阴影延伸到最高列的高度。如何操作呢？

- superlogical

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/

- Peter

---

很好的回答，Peter，但它对浏览器要求相当高 :) - jamesplease

将-webkit-…这一行替换为radial-gradient(ellipse farthest-side at 50% 0%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)，以使其在标准和跨浏览器的方式下工作。 - Sebastian Simon

Answer 2

我想我只会使用图像，并在 div 上设置最小高度 :-)

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

- superlogical

Answer 3

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

- lioncin

Answer 4

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

您需要做的是应用一个background-image定位到最高列的边缘。然后，您可以使用:before和:after伪元素，将其设置为absolute定位，分别为top:0;和bottom:0，以设置阴影的“顶部”和“底部”。

明白了吗？这里有一个JSFiddle，它使用边框和文本而不是图像来显示它。

当然，JSFiddle中div的height参数无关紧要；它可以是min-height或不存在。我只是设置它来给div一些大小。

- jamesplease

---

那么，after和before会像遮罩一样，在其中使用background-image来产生逐渐消失的阴影效果吗？这很酷 :) 你也可以添加额外的div，语义化程度较低，仍然可以使用绝对定位。 - superlogical

是的，你有想法了。使用更多的“div”会使其失去语义能力，但确实可以为其提供更深入的“IE”支持，这可能是值得的！ - jamesplease