Question

我正在开发一种卡片设计，需要在你可能称之为“复合形状”的盒子阴影上。

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

我的目标是将相同的阴影应用于两个对象，使它看起来好像虽然是一个“复合形状”。反正有没有这样做？这是我到目前为止采用的方法：

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将其推送到

部分下面

要添加

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。

将InvalidCastException添加到原始div的样式中。

然后添加

position:relative;

设置新div的样式。

Box-shadow无法使用负边距

2 个答案: