Question

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

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

你也可以使用clip：rect（0px，210px，200px，-10px）;

可悲的是，我从未想出办法让它与灵活尺寸的盒子配合使用。

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

剪辑：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 3

有，但它相当脆弱。

使用以下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）应用于#content div，并使用#wrap div来剪切阴影，使用{{1}当然，由于尊重overflow-y: hidden;的浏览器数量，这使得它更加脆弱。

另一方面，解释overflow-y的浏览器或多或少肯定与box-shadow处理得恰当。

Answer 4

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

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：

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

显示：

enter image description here

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

Answer 5

我有两种可能的解决方案，可以产生完全所需的效果：某些边缘上的“普通”框阴影，而其他边缘上没有任何内容。本和其他S.O.中列出的许多解决方案。问题导致阴影“消散”，因为它们靠近没有阴影的边缘，当我真的相信大多数人都想要一个干净的截止。

然而，这两种解决方案都有警告。

解决方案1：剪辑路径（实验性）

如果您愿意仅使用部分支持的实验技术，则可以使用clip-path property。

在您的情况下，您将使用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：剪辑（不建议使用）

如果

您愿意在有问题的div上设置position: absolute

您知道div的维度

或者您不知道div的尺寸，但您愿意仅删除顶部和/或左侧阴影

...您可以使用已弃用的 clip property。

您需要使用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 6

正如我在我的一个相关问题中所述，这个问题的解决方案要么非常模糊，要么就目前的技术无法解决。它真的太糟糕了，因为它是网页设计中的一个共同主题，所以无法实现这一点。

我使用了png阴影，因为它似乎是唯一理智的解决方案。

感谢您的所有建议。

Answer 7

如果为目标元素及其相邻元素设置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和nav元素的z-index值9。这样会将标题放置在nav元素的顶部，并且在该边缘上将看不到阴影/模糊。

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

Answer 8

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

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

Answer 9

基于 Michaels spread-offset 的 solution 非常好。问题在于框阴影不会运行到边缘，这可能正是大多数人希望阴影看起来的样子。

下面是我基于 clip-path 的方法，它不仅可以让您有效地切割阴影，还可以更好地控制阴影应该出现在哪一边。这是正常、扩展偏移和剪辑路径之间的比较：

.container {
  padding: 65px 0px;
  text-align: center;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #0f0;
  margin: 15px;
}

/* default box shadow */
.box1 { 
  box-shadow: 0px 0px 10px 5px #000;
}

/* single side with spread-offset */
.box2 {
  box-shadow: 0px 10px 5px -5px rgba(0,0,0,.8);
}

/* single side with clip-path */
.box3 {
  box-shadow: 0px 0px 10px 5px #000;
  clip-path: polygon(0 0, 100% 0, 100% 300%, 0 300%);
}

    <div class="container">

      <div class="box box1">1</div>
      
      <div class="box box2">2</div>
      
      <div class="box box3">3</div>

    </div>

Browser support for clip path 相当不错。这是一个不错的小tool for creating clip-path masks。

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

9 个答案:

解决方案1：剪辑路径（实验性）

解决方案2：剪辑（不建议使用）