在overflow区域之外显示box-shadow

Question

我有几个盒子在一个容器里。容器的设置为overflow: hidden，以确保每个盒子都位于它的位置上。如果去掉overflow: hidden，则会导致内容溢出到其他地方而不是调整大小以适应容器，因此这不是一种选项。

我试图给这些盒子添加box-shadow，但是这样做会导致边缘处的盒子阴影不显示（如下图所示），因为父容器在那里停止并且没有溢出。

如绿色箭头所示，左侧的两个盒子显示了它们预期的阴影。如红色箭头所示，右侧的两个盒子在与容器相接触的右侧边缘处的阴影被修剪了。

是否有任何方法来解决这个问题？

一个简单的复现：
注意：此代码片段是由社区编辑添加的，而不是作者，目的是尝试复制症状。它并不反映作者用于生成附加图像的实际代码。

.container {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.shadow {
  display: inline-block;
  height: 2rem;
  background-color: tomato;
  box-shadow: 0 0 0.25rem black;
}

<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

- Ieuan

Answer 1

你能给内部的div添加边距吗？

    #inner-div {
      margin: 10px
    }

查看这个JSFiddle

- musafar006

---

那是另一个选项，但整个网站都会偏移10像素，因为容器是居中的，而块是在其中。 - Ieuan

@Ieuan 要减小宽度吗？可以使用 width: calc(500px - 20px) 或者 width: (100% - 20px)。 - musafar006

谢谢@dreamster！我现在在容器的右侧添加了20像素的填充，这基本上解决了问题。 - Ieuan

@Ieuan 很高兴能帮忙！ :) - musafar006

显然这会起作用，只是看起来很愚蠢。 - undefined

Answer 2

试试这个：

    div {
        top: 100px;
        position: absolute;
        left: 100px; height: 50px;
        width: 200px;
        -webkit-box-shadow: 
            5px 5px 5px #000, 
            inset 0 0 5px #000;
        border-radius: 5px;
        background: white;
    }

更新演示

- Ivin Raj

---

我在所有块中添加了<div class="shadow"></div>，并将其样式设置为width: 100%; height: 100%; position: absolute;，但是块本身也有overflow: hidden;，这使它们无法显示。请参见：http://ruun.nl/new/ - Ieuan