Css 删除框阴影中不必要的着色

我想创建框阴影，如下所示

根据我对箱形阴影的研究。它需要以下参数：

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

在这里，我在顶部、左侧和右侧也得到了较轻的阴影（我不想要）

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

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

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

我不想内部阴影的权利和底部的一部分

---

是否可以删除框阴影中不必要的阴影？

框阴影可以只在一侧、两侧、三侧，但在这种情况下，应将模糊值设置为零-请参见演示

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

overflow:hidden

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

演示

第一个阴影的HTML：

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


第二个阴影的HTML

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

.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:'';
}

你可以在一边、两边、三面都有一个长方体阴影，但在这种情况下，你应该将模糊值设置为零——见演示

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

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

演示

第一个阴影的HTML：

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


第二个阴影的HTML

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

.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:'';
}

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

或者，您可以使用“阴影扩散”（shadow spread）属性（阴影声明框中的第四个数字）缩小阴影，以隐藏阴影的侧面部分

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

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

或者，您可以使用“阴影扩散”（shadow spread）属性（阴影声明框中的第四个数字）缩小阴影，以隐藏阴影的侧面部分

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


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

现在你有了内心的阴影，但不是在你右边，或者你要求的底部。我误解你的意思了吗？
盒子阴影又带了一个参数
排列

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

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

请参见此处
框阴影采用另一个参数
排列

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

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

请看这里
与其像凯尔建议的那样收缩，还不如包裹div并隐藏阴影！与其像凯尔建议的那样收缩，还不如包裹div并隐藏阴影+1.使用额外标记隐藏不必要内容的第一个想法比演示示例要好。+1。使用额外标记隐藏不必要内容的第一个想法比演示示例要好。