3 面的 CSS 阴影答案

【问题标题】：CSS shadows on 3 sides3 面的 CSS 阴影
【发布时间】：2008-10-31 15:12:17
【问题描述】：

我正在查看所有很棒的 CSS 投影教程。不幸的是，我需要在块元素的三个侧面（左、下、右）上放置阴影。所有的教程都讨论了将块元素向上和向左移动。有人对在三个甚至四个方面放置阴影有见解吗？

【问题讨论】：

标签： html css

【解决方案1】：

让你的块元素更大/更高，使其超过你想要的边。

【讨论】：

【解决方案2】：

这是一种方法：

<div style='position:relative;'>
    <div style='position:absolute;top:10px;left:10px;width:300px;height:100px;z-index:1;background-color:#CCCCCC'></div>
    <div style='position:absolute;top:0px;left:0px;width:300px;height:100px;z-index:2;background-color:#00CCFF'>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper.</p>
    </div>
</div>

根据您的喜好调整“z-index:1”DIV 的大小和位置。

【讨论】：

【解决方案3】：

伪 HTML

<div style="position:absolute;top:8;left:12;width:200;height:204;background-color:#888888"></div>
<div style="position:absolute;top:10;left:10;width:200;height:200;background-color:#FFFFFF">The element</div>

您需要调整阴影的大小。在上面的示例中，阴影略高于元素，因此阴影显示在上方，稍微向左偏移，因此阴影显示在右侧，并且比元素略大，因此阴影显示在下方。

【讨论】：

【解决方案4】：

谢谢大家。我最终这样做的方式是这样的：

<div id="top_margin"></div>
<div id="left_right_shadow">this div has a 5 px tall repeating background that is a bit bigger than the width of my content block, shadow on the left, white space, shadow on the right
  <div id="content">Content as normal</div>
</div>
<div id="bottom_margin">This has the bottom shadow</div>

【讨论】：