防止箱子阴影显示在特定的一面 [英] Prevent box shadow from showing on a specific side

问题描述

有没有办法创建一个css box-shadow，其中不管模糊值，阴影只出现在所需的边？

Is there any way to create a css box-shadow in which regardless of the blur value, the shadow only appears on the desired sides?

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

For example if I want to create a div with shadows on left and right sides and no shadow on the top or bottom. The div is not absolutely positioned and its height is determined by the content.

- 编辑 -

@ricebowl：我感谢你的答案。也许你可以帮助创建一个完整的解决方案，以解决我的回复您的解决方案中指出的问题...我的页面设置如下：

@ricebowl: I appreciate your answer. Maybe you can help with creating a complete solution to fix the problems stated in my reply to your solution... My page setup is as follows:

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

推荐答案

正如我在我的一个相关问题中所说的，解决这个问题是非常模糊，或者是不可能与当前的技术。它真的太糟糕了，没有办法完成这个，因为它是网页设计中的一个共同的主题。

As I stated in a related question of mine the solution to this problem is either very obscure or is not possible with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

我诉诸于使用png阴影，因为它似乎是唯一的

I resorted to using a png shadow as it seems to be the only sane solution.

感谢您提出的所有建议。

Thanks for all of your suggestions.

这篇关于防止箱子阴影显示在特定的一面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！