jquery - 从底部移除盒子阴影

Question

如果我不想在底部有框阴影，我应该将我的 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);

Answer 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/

Answer 2

使用内盒（带有阴影）和外盒（带有溢出：隐藏）：

<div style="height: 30px; width: 30px; overflow: hidden; padding: 10px 10px 0 10px;">
    <div style="height: 30px; width: 30px; box-shadow: 0 5px 19px 2px #000;">
    </div>
</div>

http://jsfiddle.net/wQA8D/（对不起内联css）