如何在单个div中使用三个背景图像来模拟阴影

Question

我正在制作一个手风琴菜单，当菜单元素打开/关闭时，它的高度会发生变化，并且需要在菜单侧面留下阴影。

我有三张图像用作背景图像来模拟阴影效果（顶部和底部各一个，中间一个将在y维度重复）。目前我已经为左上角和左下角设置了背景图像，但无法弄清楚如何使中间阴影重复以填补空白。

有什么建议吗？

background: url('/devassets/content_shadow_top.png') left top no-repeat,  url('/devassets/content_shadow_bottom.png') left bottom no-repeat;

Answer 1

CSS阴影

    /*  Box Shadow, To Do: IE hack using filters */
    -moz-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    -webkit-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    box-shadow: 2px 0 3px #000, -2px 0 3px #000;

没有理由使用图像，除非你的影子真的很复杂。

css-tricks的更多信息。

Answer 2

您可以使用额外的标记来完成此操作。创建一个新元素以包含每个图像，并根据需要定位它们以实现效果。