如何让一个投影一直穿过div的边缘，而不是插入

Question

这是一个我无法弄清楚的超级简单问题。

我希望在div的底部有一个投影。事实上，它覆盖了大部分底部：

以下是代码：

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

我需要阴影一直穿过两边。

由于

编辑：我错了吗？我应该使用其他一些CSS属性吗？

Answer 1

有一个解决方案，使用额外的div，比原来大，绝对定位。请在此处查看工作示例：http://jsfiddle.net/martinschaer/MHs5R/

<div class="container">
    <div class="content"></div>
    <div class="shadow"></div>
</div>

和CSS：

.container{
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.content{
    height: 200px;
    width: 200px;
    background-color: #fff;
}

.shadow{
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    position: absolute;
    top: 20px; /* .container top padding */
    left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
    width: 215px; /* .content width + shadow spread */
    height: 200px;
}​

Answer 2

box-shadow参数的顺序如下：
水平偏移，垂直偏移，模糊距离，阴影的扩散距离，颜色值

我认为你需要的是box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

这是小提琴 - http://jsfiddle.net/ashwyn/Cbqej/1/

Answer 3

要避开顶部阴影，请添加垂直偏移并相应地调整其他参数。此外，将展开距离设置为0或更大，您将覆盖水平边框。

从这开始：

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

如果没有覆盖完整的水平边框，请稍微增加第4个值，直到看起来很好。如果需要，也可以相应地调整垂直偏移。

查看实际框的html / css会很有帮助。

Answer 4

结果是：

Demo on dabblet.com

CSS：

div {
    background-color: #FFF;
    border: 1px solid #888;
    width: 100px;
    height: 100px;
    box-shadow: 0px 10px 5px -2px #888 ;
}