7

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

2 回答 2

21

不可能,因为 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/

于 2013-10-22T17:29:45.673 回答
7

使用内盒(带有阴影)和外盒(带有溢出:隐藏):

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

于 2013-10-22T17:28:53.250 回答