删除底部的框阴影

如果我不想在底部有框阴影，我应该将 CSS 更改为什么？

我正在使用这个，但我有<sections>部分之间底部有一个阴影。我不希望这样，所以我只想去掉底部的阴影。

当前的 CSS 是：

 -webkit-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1);
  box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1);

不可能，因为 box-shadow 是基于元素的整个边界生成的 - 您无法选择不希望计算阴影的边界...除非您愿意在 y 上设置负偏移-轴：

box-shadow: 0 -19px 19px 2px rgba(0, 0, 0, 0.1);

但这意味着顶部的阴影会更大。另一种方法是用伪元素遮盖底部的阴影，但这会带来几个问题：

1. 你的背景必须是纯色、统一的颜色（图案可能会不匹配）
2. 阴影将在底部突然结束

此修复的 CSS 如下（如果更改阴影模糊大小，则可能需要调整像素值）。

div:after {
    background-color: #fff;
    height: 20px;
    content: "";
    position: absolute;
    bottom: -20px;
    left: -20px;
    right: -20px;
}

请参阅下面的概念验证示例：

body {
  padding: 50px;
}

div {
  margin: 0 auto 50px auto;
  width: 50%;
  height: 50px;
  box-shadow: 0 5px 19px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}

div::after {
  background-color: #fff;
  height: 20px;
  content: "";
  position: absolute;
  bottom: -20px;
  left: -20px;
  right: -20px;
}

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

http://jsfiddle.net/teddyrised/63hhp/ http://jsfiddle.net/teddyrised/63hhp/