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);

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

你的背景必须是纯色，均匀的颜色（图案会不匹配）
阴影将在底部突然结束

此修复的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）

从底部删除框阴影

2 个答案: