从div顶部删除框阴影？

Question

我正在尝试为我的div添加一个盒子阴影,但我只想让阴影出现在div的左侧,右侧和底部,是否有人知道或者可以告诉我如何从我的div中仅删除顶部阴影？

-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
 -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

Answer 1

截至 2022 年 11 月，有一种使用 CSSclip-path属性来实现此目的的良好、简洁的方法。

div {
  box-shadow: 0 0 10px black;
  clip-path: inset(0px -10px -10px -10px);
}

插入将从顶部、右侧、底部和左侧边缘剪掉元素。对于示例中的阴影，我们剪掉顶部边界之外的任何内容，隐藏顶部的阴影，并在所有其他侧面为阴影留出 10 像素的空间。

在我看来，这是解决问题的干净、理想的解决方案。浏览器支持很好，但如果您仍然需要 IE11 的支持，您需要探索该polygon选项而不是 inset。

Answer 2

您可以使用:before绝对定位和负边距来掩盖框阴影，而不是在标记中添加额外的 div 。

div { 
  position: relative;
  background-color: white;
  box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}

p { 
  padding: 20px; 
}

div:before {
  content: "";
  height: 7px;
  width: 100%;
  position: absolute;
  top: -7px;
  background: inherit;
  z-index: 2;
}

<div><p>Some container with shadow</p></div>

Answer 3

基本的Box-shadow值是：

box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]

因此，例如：

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

只是一个没有偏移的阴影

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

将是具有5px垂直偏移的阴影，有效地将阴影向下推，如下所示：

http://jsfiddle.net/TLQs9/