防止盒子阴影出现在特定的一面

Question

有没有办法创建一个css box-shadow，无论模糊值如何，阴影只出现在所需的边上？

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

- 编辑 -

@ricebowl：感谢您的回答。也许您可以帮助创建一个完整的解决方案来解决我对您的解决方案的回复中所述的问题……我的页面设置如下：

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

像这样的CSS：

 #container {width:960px; min-height:100%; margin:0px auto -32px auto;
       position:relative; padding:0px; background-color:#e6e6e6;
       -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
       3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px
           auto 0px auto;}

原文由 Jason Turner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如我在我的一个相关问题中所说，这个问题的解决方案要么非常模糊，要么用当前的技术是不可能的。它真的太糟糕了，因为它是网页设计中的一个常见主题，所以没有办法做到这一点。

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

感谢您的所有建议。

原文由 Jason Turner 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

如果为目标元素及其相邻元素设置 z-index，则可以防止边缘出现阴影/模糊。在您不想要阴影/模糊的边缘上，通过 z-index 属性将相邻元素放置在更高的平面上。例如，如果您有一个带有盒子阴影的侧边导航 “box-shadow: 6px 0px 10px #bdbdbd” ，那么 box-shadow 属性将导致顶部边缘（到标题）上出现一些出血。您可以通过将标题上的 z-index 属性设置为高于 nav 元素的 z-index 的值来防止 box-shadow 属性的模糊溢出到标题元素上。您需要将 header 和 nav 元素的位置都设置为“相对”，否则 z-index 将不起作用（z-index 不适用于默认位置“static”）。

我为标题的 z-index 随机选择了值 10，为导航元素的 z-index 选择了 9。这会将标题放置在导航元素的顶部，您将不会在该边缘看到阴影/模糊。

 #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;
}

原文由 Jay Jara 发布，翻译遵循 CC BY-SA 4.0 许可协议