在Box Shadow中删除不必要的阴影

Question

我想创建Box shadow，如下所示。

根据我对Box shadow的研究。它采用以下参数：

DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}

请为此找到jsfiddle。

要创建上面的示例，我需要使用框阴影。

例如1，我使用了以下样式：

 box-shadow:0px 10px 22px 0px gray;

在这里，我在顶部，左侧和右侧也变得更亮（我不想要）

在示例2中，我使用了以下样式：

 box-shadow:10px 10px 22px 0px gray inset;

我不希望内部阴影到右下角。

是否可以在box-shadow中删除不必要的阴影？

Answer 1

您可以在一侧，两侧，三侧都有一个方框阴影，但在这种情况下，您应该将模糊值设置为零 - 请参阅演示http://dabblet.com/gist/1579740

但是，您可以通过将div包装到相同宽度的另一个外部div中来模拟第一种阴影，但设置overflow: hidden;

的高度略高一些

如果您不需要div的背景为半透明，那么您也可以使用绝对定位的伪元素模拟第二个，以遮挡底部和右侧阴影。

DEMO http://dabblet.com/gist/3149980

第一个影子的HTML：

<div class="outer">
    <div class="shadow1"></div>
</div>

第一个阴影的CSS

div {
    width: 100px;
    height: 100px;
}
.outer {
    padding-bottom: 35px;
    overflow: hidden;
}
.shadow1 {
    box-shadow: 0px 10px 22px 0px gray;
    background: #f0f0f0;
}

---

第二个阴影的HTML

<div class="shadow2"></div>

第二个阴影的CSS

.shadow2 {
    box-shadow:10px 10px 22px 0px gray inset;
    position: relative;
    background: #f0f0f0;
}
.shadow2:before {
    top: 22px;
    bottom:0;
    left:22px;
    right:0;
    position: absolute;
    background: #f0f0f0;
    content:'';
}

Answer 2

你可以使用一些额外的标记（一个额外的div包裹元素，以便它隐藏你不想要的其他阴影）

或者您可以使用阴影扩展属性（box-shadow声明中的第4个数字）缩小阴影以隐藏阴影的侧面部分。

这会在底部创建一个较小的阴影，但不需要额外的HTML。

http://jsfiddle.net/hBMQm/2/

Answer 3

#b {
    position:absolute;
    width:100px;
    height:100px;
    top:200px;
    left:200px;
    background-color:#F0F0F0;
    text-align:center;
    box-shadow:20px 20px 22px 0px gray inset;
 }

现在你有了内在的阴影，但不是你所要求的右边或底部。我误会了你吗？

Answer 4

box-shadow还需要一个参数spread

使用以下代码我能够达到预期的效果

box-shadow: 0px 20px 22px -20px gray inset;

见http://jsfiddle.net/hBMQm/3/