Html 如何仅使“框阴影”在到达边界时被截断？

如何在小DIV的边界右侧获得一个良好的阴影，该阴影与大DIV的阴影相等，但在到达小DIV的边界底部/大DIV的边界顶部时会发生剪切。 注：我不能使用Z索引，我有一个网站的方式更复杂。此外，在这里不能使用排列，因为当它到达边框底部/边框顶部时，排列不会被切断，它将不再是三维的。 html：

我还有一个JS垃圾桶：

-我知道，这个问题的格式有点糟糕，但我希望你能理解我的问题。-

你想要这样吗？我已经更新了一些代码

更新

这样就行了

#small{
   -webkit-box-shadow: 9px 1px 3px -1px rgba(50, 50, 50, 0.75);
}

---

为什么不给div添加背景色呢

---

是的，差不多。但是，你仍然可以在阴影结束之前看到一条非常小的白色条纹。我想，那条条纹不在那里。因此，小+大div是最新的答案。参见changesAlso，您应该使用类。为drop shadow创建一个类，并在所有框上使用，而不是在每个ID上定义它。这样编辑就容易多了。

#small {
border: 1px solid black;
width: 200px;
height: 50px;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
} 

#small{
   -webkit-box-shadow: 9px 1px 3px -1px rgba(50, 50, 50, 0.75);
}

#small {
  border: 1px solid black;
  width: 200px;
  height: 50px;
  background-color:#fff;
}
#large {
  width: 300px;
  border: 1px solid black;
  height: 100px;
  background-color:#fff;
}
.dropshadow {
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}