在溢出区域外显示框阴影

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>

Answer 1

试试这个：

    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;
    }

UPDATED DEMO

Answer 2

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

    #inner-div {
      margin: 10px
    }

检查这个JSFiddle

在溢出区域外显示框阴影

Show box-shadow outside of overflow area

html

css

overflow

有什么办法解决这个问题吗？