css - 防止框阴影显示在特定的一侧

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

Answer 1

您可以定义第四个距离，称为散布偏移，它将阴影在所有 4 个边上移入或移出。因此，如果您将其设置为模糊距离的负值，这将使阴影向内移动相同的距离，因为模糊将阴影向外延伸，从而有效地隐藏它。当然，这也会将阴影向内移动到您希望它出现的一侧，因此您需要通过模糊距离增加偏移量才能撤消它。即

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);