Question

我正在查看所有CSS Drop shadow教程，这很棒。不幸的是，我需要在块元素的三个边上（左，下，右）放置一个阴影。所有教程都讨论了将块元素向上和向左移动。任何人都有洞察力在三个甚至四个方面投下阴影吗？

Answer 1

使你的块元素更大/更高，使它超出你想要的边。

Answer 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的大小和位置。

Answer 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>

您需要使用阴影的大小。在上面的示例中，阴影略高于元素，因此阴影显示在上方，它稍微偏向左侧，因此阴影显示在右侧，它略大于元素，因此阴影显示在下方。

Answer 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>

三面的CSS阴影

4 个答案: