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

Question

有没有办法创建一个css框阴影,其中无论模糊值如何,阴影只出现在所需的边上？

例如,如果我想在左侧和右侧创建一个阴影,而在顶部或底部没有阴影.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);

Answer 2

我有 2 种可能的解决方案，可以产生完全想要的效果：某些边缘上的“正常”框阴影，而其他边缘上没有。此问题和其他 SO 问题中列出的许多解决方案会导致阴影“消散”，因为它们靠近没有阴影的边缘，而我真的相信大多数人都想要一个干净的截止点。

但是，这两种解决方案都带有警告。

解决方案 1：clip-path（实验性）

如果您愿意在仅部分支持的情况下使用实验性技术，则可以使用clip-path属性。

在您的情况下，您将使用clip-path: inset(px px px px);从相关边缘计算像素值的位置（见下文）。

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

这将剪辑有问题的 div：

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

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

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

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

如果：

1. 你愿意position: absolute在有问题的 div上设置
2. 并且您知道 div 的尺寸
3. 或者您不知道 div 的尺寸，但您愿意只删除顶部和/或左侧的阴影

...您可以使用已弃用的 clip属性。

您需要使用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 为任何大小）来裁剪顶部和左侧阴影。

Answer 3

你也可以使用clip:rect(0px,210px,200px,-10px);

可悲的是,我从未想出办法让它与灵活尺寸的盒子一起工作.

我经常用它来下降菜单,我只想在侧面和底部有阴影.在这种情况下,我只是将右侧和底部剪辑值设置为某个高数字,例如

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

Answer 4

有,但它相当脆弱.

使用以下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>

以下css:

#wrap {width: 70%;
 margin: 1em auto;
 overflow: hidden;
 overflow-x: visible;
 }

#content
 {width: 90%;
 margin: 0 auto;
 -moz-box-shadow: 0 0 1em #ccc;
 -webkit-box-shadow: 0 0 1em #ccc;
 }

#content p
 {overflow-y: hidden;
 padding: 0.5em 0;
 }

(现场演示位于: http://davidrhysthomas.co.uk/so/shadows.html.)

如果你为包含的元素添加边距(特别是<p>元素,这就是我使用的原因padding),脆弱性就会蔓延开来.但是,实际上,将-moz-box-shadow(和/或-webkit-box-shadow)应用于#contentdiv,并使用#wrapdiv来剪切阴影,overflow-y: hidden;当然,由于尊重的浏览器数量,使得它更加脆弱overflow-y.

另一方面,解释box-shadow或多或少肯定适当处理的浏览器overflow-y.

Answer 5

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

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

感谢您的所有建议。