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

Prevent box shadow from showing on a specific side

提问by Jason Turner

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?

有什么方法可以创建一个 css box-shadow，无论模糊值如何，阴影只出现在所需的侧面？

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.

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

-- Edit --

- 编辑 -

@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:

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

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

And CSS like this:

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

采纳答案by Jason Turner

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.

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

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

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

Thanks for all of your suggestions.

感谢您的所有建议。

回答by Michael

There is a fourth distance you can define called the spread offset, which moves the shadow in or out on all 4 sides. So if you set that to the negative of the blur distance, this will shift the shadow inwards by the same distance as the blur extends the shadow outwards effectively hiding it. Of course this will also shift the shadow inwards on the side you do want it to appear so you'll need to increase the offset by the blur distance to undo that. i.e.

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

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

So in your example:

所以在你的例子中：

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

回答by Alex

You can also use clip:rect(0px, 210px, 200px, -10px);

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

Sadly I was never able to figure out a way to get it to work with a flexible sized box.

可悲的是，我从来没有想出一种方法来让它与一个灵活大小的盒子一起工作。

I often use this for drop down menues where I only want shadow on sides and bottom. In that case I just set the right and bottom clip values to some high number, such as

我经常将它用于下拉菜单，我只想要侧面和底部的阴影。在这种情况下，我只是将右侧和底部剪辑值设置为一些较高的数字，例如

clip:rect(0px, 1000px, 1000px, -10px); /* Clip the top of the box-shadow off */

剪辑：矩形（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;
}

回答by David says reinstate Monica

There is, but it's fairly fragile.

有，但它相当脆弱。

Using the following xhtml:

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

And the following css:

以及以下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;
 }

(Live demo located here: http://davidrhysthomas.co.uk/so/shadows.html.)

（现场演示位于此处： http://davidrhysthomas.co.uk/so/shadows.html。）

The fragility creeps in if you add margins to the contained elements (especially the <p>elements, which is why I used paddinginstead). But, pretty much, apply the -moz-box-shadow(and/or -webkit-box-shadow) to the #contentdiv, and use the #wrapdiv to clip the shadow, using overflow-y: hidden;this, of course, makes it even more fragile due to the number of browsers that respect overflow-y.

如果您为所包含的元素（尤其是<p>元素，这就是我使用它的原因padding）添加边距，脆弱性就会蔓延。但是，几乎将-moz-box-shadow(和/或-webkit-box-shadow) 应用于#contentdiv，并使用#wrapdiv 裁剪阴影，overflow-y: hidden;当然，由于尊重overflow-y.

On the other hand, the browsers that interpret the box-shadowmore or less certainly deal appropriately with overflow-y.

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

回答by Luke

I have 2 possible solutions that produce exactlythe desired effect: a "normal" box shadow on some edges and nothing on other edges. Many of the solutions listed in this and other S.O. questions result in shadows that "dissipate" as they near the edge that is to have no shadow, when really I believe most people are wanting a clean cut-off.

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

However, both solutions come with caveats.

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

---

---

Solution 1: clip-path (experimental)

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

If you are willing to use experimental technology with only partial support, you could use the clip-pathproperty.

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

In your case you would use clip-path: inset(px px px px);where the pixel values are calculated from the edge in question (see below).

在您的情况下，您将使用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);
}

This will clip the div in question at:

这将剪辑有问题的 div：

• 0 pixels from the top
• 5 pixels outside of the right edge (to include the shadow)
• 0 pixels from the bottom
• 5 pixels outside of the left edge (to include the shadow)

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

Note that no commas are required between pixel values.

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

Absolute positioning is not required and the size of the div can be flexible.

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

---

---

Solution 2: clip (deprecated)

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

If:

如果：

1. you were willing to set position: absoluteon the div in question
2. AND you know the dimensions of the div
3. OR you don't know the dimensions of the div but you are willing to only remove the top and/or left shadows

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

...you could use the deprecatedclipproperty.

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

You'd need to use clip: rect(px, px, px, px);where the pixel values are calculated from the top left. I've used it as follows to cut off the top box-shadow but keep the bottom and sides:

您需要使用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);
}

The above will clip the top and bottom box-shadows while leaving the 5px left and right box-shadows. Note that the size of the div must be known.

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

If the size of the div is not known this method will only work to clip the top and left shadowsusing something like clip: rect(0, 3000px, 3000px, 0);(note the massive value for the right and bottom values to allow the div to be any size).

如果不知道 div 的大小，则此方法仅适用于使用类似clip: rect(0, 3000px, 3000px, 0);（注意右侧和底部值的大量值以允许 div 为任何大小）来裁剪顶部和左侧阴影。

回答by Redtopia

The way to do this is to put the box with the shadow under a div that has overflow set to 'hidden'. For example, to create a shadow around a box that only appears on the left, top and right sides:

这样做的方法是将带有阴影的框放在溢出设置为“隐藏”的 div 下。例如，要在仅出现在左侧、顶部和右侧的框周围创建阴影：

CSS:

CSS：

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

HTML:

HTML：

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

Display:

展示：

You can adjust the #container padding and size to clip appropriate for your needs. In this example, I'm clipping the bottom border of the #shadow-box.

您可以调整 #container 填充和大小以适合您的需要。在这个例子中，我剪掉了#shadow-box 的底部边框。

回答by Jimmy Cuadra

I think there is always likely to be a little bleed-through to adjacent sides that will become more obvious with higher blur values. You can offset the perceived bleed-through by using a low blur and a higher offset on the sides you want the shadow to appear on. For example, this would create a noticeable shadow on the sides and a nearly invisible one on the top and bottom:

我认为总是可能会有一点渗透到相邻的边，随着模糊值的提高，这种渗透会变得更加明显。您可以通过在希望出现阴影的两侧使用低模糊和更高的偏移来抵消感知到的渗透。例如，这会在侧面产生明显的阴影，而在顶部和底部产生几乎不可见的阴影：

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