7

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

中间有径向阴影的列

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

4

4 回答 4

19

以前的答案并没有真正回答您的问题：“如何创建径向 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/

于 2012-11-14T22:36:17.193 回答
0

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

于 2012-10-30T07:56:25.930 回答
0

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

您要做的是将background-image定位应用到最高柱的边缘。然后你可以使用:before和:after伪元素，分别设置为和的absolute定位，在阴影上设置“帽子”。top:0;bottom:0

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

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

于 2012-10-30T08:09:06.733 回答
0

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

.column.right {
  padding-left: 30px;
  background: url(/img/shadow.png) no-repeat left top;
  min-height: 265px;
}
于 2012-10-30T08:02:24.380 回答