从底部删除框阴影

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

不可能,因为盒子阴影是基于元素的整个边界生成的 - 你不能选择你不希望计算阴影的边界...除非你愿意在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;
}

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）