1

我想创建如下所示的盒子阴影。

根据我对 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 中不必要的阴影？

4

4 回答 4

2

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

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

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

演示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:'';
}
于 2012-07-20T09:56:37.687 回答
1

你可以用一些额外的标记来做到这一点（一个额外的 div 包装元素，以便它隐藏你不想要的其他阴影）

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

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

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

于 2012-07-20T10:03:11.090 回答
1 
#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;
 }

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

于 2012-07-20T10:04:11.520 回答
1

box-shadow 多了一个参数spread

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

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

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

于 2012-07-20T11:11:44.957 回答