我不明白為什么，但是我的內容下面有一個嵌入框的陰影。

這里有一個例子:

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}

<div>
   a
</div>

您需要在div中創建一個新元素，絕對定位，高度和寬度為100%，然后給該元素添加方框陰影。

div {
    height: 300px;
    color: red;
    position: relative;
}

div > div {
    box-shadow: inset 0 0 10px black;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div>
    <div></div>
    Sample text
</div>

這個答案通過一個最小的例子提供了最直接的解決方案，并解決了滾動的問題。

不幸的是，沒有辦法避免額外的包裝div(由于框陰影分層)。

.container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 9px 3px yellow;
  pointer-events: none;
}

.items {
  height: 100px;
  overflow: scroll;
}

<div class="container">
  <div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
    <div class="item">Eleven</div>
    <div class="item">Twelve</div>
  </div>
</div>