Css 防止长方体阴影显示在特定侧

有没有办法创建一个css框阴影，在这个阴影中，不管模糊值是多少，阴影只出现在所需的边上

例如，如果我想创建一个左右两侧都有阴影的div，而顶部和底部都没有阴影。div不是绝对定位的，其高度由内容决定

--编辑--

@我感谢你的回答。也许您可以帮助创建一个完整的解决方案，以解决我在回复您的解决方案时所述的问题。。。我的页面设置如下所示：

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="clearfooter"></div>
</div>
<div id="footer"></div>

---

我认为总是有可能有一点出血通过相邻的双方，将变得更明显，更高的模糊值。您可以通过在希望阴影出现的边上使用低模糊和高偏移来偏移感知的出血。例如，这将在侧面创建一个明显的阴影，在顶部和底部创建一个几乎不可见的阴影：

box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;

---

有，但它相当脆弱

使用以下xhtml：

<div id="wrap">

 <div id="content">

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

 </div>

</div>

（现场演示位于此处：）

如果在包含的元素中添加边距（尤其是

元素，这就是为什么我使用

填充

的原因）。但是，几乎可以将

-moz-box-shadow

（和/或

-webkit-box-shadow

）应用于

#content

div，并使用

#wrap

div剪裁阴影，使用

overflow-y:hidden

当然，这使得它更加脆弱，因为有很多浏览器支持

overflow-y

---

另一方面，解释

框阴影的浏览器或多或少都会适当地处理
溢出-y
正如我在我的一个相关问题中所述，这个问题的解决方案要么非常模糊，要么在当前的技术中是不可能的。这真的太糟糕了，没有办法做到这一点，因为这是网页设计中的一个常见主题

我求助于使用png阴影，因为它似乎是唯一明智的解决方案

谢谢您的建议。
您可以定义第四个距离，称为“扩散偏移”，它可以在所有四条边上向内或向外移动阴影。因此，如果将其设置为模糊距离的负数，这将使阴影向内移动相同的距离，因为模糊将阴影向外延伸，从而有效地隐藏它。当然，这也将使阴影在您希望它出现的一侧向内移动，因此您需要将偏移量增加模糊距离以撤消该操作。i、 e

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

在你的例子中：

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);

你也可以使用clip:rect（0px，210px，200px，-10px）

可悲的是，我始终无法找到一种方法，让它与一个灵活大小的盒子一起工作

我经常在下拉菜单中使用它，在下拉菜单中，我只希望在侧面和底部有阴影。在这种情况下，我只是将“右”和“下”剪辑值设置为某个较高的数字，例如

剪辑：rect（0px，1000px，1000px，-10px）；/*将长方体顶部的阴影剪掉*/

#box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}

方法是将带有阴影的长方体放在溢出设置为“hidden”的div下。例如，要在仅显示在左侧、顶部和右侧的长方体周围创建阴影，请执行以下操作：

CSS:

HTML:



显示：


您可以调整#容器填充和大小，以适合您的需要。在本例中，我正在剪裁#阴影框的下边框。
我有两种可能的解决方案，可以产生理想的效果：在某些边上有一个“正常”的框阴影，而在其他边上没有。这个问题和其他S.O.问题中列出的许多解决方案都会导致阴影“消散”，因为它们靠近边缘，即没有阴影，而实际上我相信大多数人都希望有一个干净的边界

然而，这两种解决方案都有警告


解决方案1：剪辑路径（实验）
如果您愿意在仅提供部分支持的情况下使用实验技术，您可以使用。

在本例中，您将使用
剪辑路径：inset（px-px-px）其中像素值是从相关边缘计算的（见下文）

这将在以下位置剪辑有问题的div：


距顶部0像素
右边缘外5个像素（包括阴影）
距底部0像素
左边缘外5个像素（包括阴影）

请注意，像素值之间不需要逗号

不需要绝对定位，div的大小可以灵活


解决方案2：剪辑（已弃用）
如果：

您愿意在相关div上设置
位置：绝对
并且您知道div的尺寸

或者您不知道div的尺寸，但您愿意
仅删除顶部和/或左侧阴影
…您可以使用已弃用的

您需要使用
clip:rect（px，px，px，px）其中从左上角计算像素值。我使用它来切断顶部框的阴影，但保留底部和侧面：

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

上面将剪辑顶部和底部框阴影，同时保留5px左右框阴影。请注意，div的大小必须是已知的

如果不知道div的大小，此方法只能使用类似于
clip:rect（0，3000px，3000px，0）的方法来剪裁顶部和左侧阴影（请注意右侧和底部值的大量值，以允许div为任意大小）。
如果为目标元素及其相邻元素设置z索引，则可以防止边缘上出现阴影/模糊。在不需要阴影/模糊的边上，通过z索引属性将相邻元素放置在较高的平面上。例如，如果您有一个带有方框阴影的侧导航“方框阴影：6px 0px 1
#container {
    height: 101px;
    overflow: hidden;
    padding: 5px 5px 0;
    width: 105px;
}
#shadow-box {
   border:1px solid #aaa;
   width:100px;
   height:100px;
   box-shadow:0 0 4px 1px #666;
}

<div id="container">
   <div id="shadow-box"></div>
<div>

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(0px -5px 0px -5px);
}

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

#header {
    background-color: #1c2a48;
    display: flex;
    position: relative;
    z-index: 10;
    width: 100%;
}
#nav {
    display: flex;
    float: left;
    position: relative;
    z-index: 9;
    height: calc(100vh - 44.6px) !important;
    width: 187px;
    border-right: .5px solid rgba(180,180,180,0.7);
    background-color: #fafafa;
    box-shadow: 6px 0px 10px #bdbdbd;
}