2023.6.14 - 设置底部阴影

如果您想要一个 outset 的阴影，只在容器底部显示，您可以使用 ::before 或 ::after 伪元素来创建一个阴影层，然后将它放在容器下面。这种方法可以避免阴影出现在容器的顶部。

下面是一个实现这个效果的 CSS 代码示例：

div {
  position: relative;
  z-index: 1;
}

div::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

这个示例中，我们首先将容器的 position 属性设置为 relative，并将 z-index 属性设置为 1，以确保容器位于阴影层的上方。然后，我们使用 ::before 伪元素创建一个阴影层，将其放置在容器的下方。最后，我们将阴影层的 z-index 属性设置为 -1，使其在容器下方。

请注意，这种方法需要调整容器和阴影层的定位，以使它们正确地重叠。您可能需要根据您的具体情况进行一些微调。