Box-shadow 不适用于负边距

Question

我正在设计一种卡片设计，它需要在您可能称之为 "compound shape" 上的方框阴影。

基本上，我已将 box-shadow 应用于父标签，并在该标签内有一个较小的图像，其负边距与父容器的顶部重叠。

我的目标是对两个对象应用相同的阴影，使它们看起来好像是一个 "compound shape"。有没有办法做到这一点？这是我目前采用的方法：

HTML:

<section>
   <div>Image</div>
</section>

CSS:

section {
  margin: 95px 20px 20px 20px;
  background-color: #FDFDFD;
  display: inline-block;
  width: 340px;
  height: 400px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15);
}

div {
  width: 300px;
  height: 250px;
  margin: -75px auto 0 auto;
  display: block;
  background: salmon;
}

Answer 1

DEMO

我们可以制作一个伪元素并给它阴影，然后通过 z-index 将其推到该部分下方

css 添加

div:before {
  content: "";
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

和 position: relative 到 div 以便绝对定位的伪元素放置在 div

中

div {
  width: 300px;
  height: 250px;
  margin: -75px auto 0 auto;
  display: block;
  background: salmon;
  position:relative /* add this as well */
}

Answer 2

我会在您已有的 div 中再放一个 div。

将 position:relative; 添加到原始 div 的样式中。

然后添加

width:100%;
height:100%;
position:absolute;
top:75px;
z-index:-1;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15);

设置新样式 div。

Box-shadow 不适用于负边距

Box-shadow not working with negative margin

html

css

margin

box-shadow