内部 div 内容上的插入框阴影

Question

我正在尝试使用div #content 实现内嵌box-shadow，如果#content不使用背景，一切都没问题，但是如果我把background-color放在#content中，盒子阴影上的#content，如何解决？

预期结果：带有背景的 Div 内容上仍有插图框阴影

这是我的代码：

#container {
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  overflow-y: scroll;
  height: 200px;
  width: 300px;
}
#content {
  background: #fff;
  width: 260px;
  margin-left: 10px;
}

<div id="container" class="some_class">
  <div id="content" class="">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
    aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
    at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
    dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
    sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
    quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
    urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
    adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
    arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
  </div>
</div>

Answer 1

尝试将z-index:-1与内部div #content position:relative一起使用

#container {
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  overflow-y: scroll;
  height: 200px;
  width: 300px;
  font: 13px Verdana;
}
#content {
  background: red;
  color: #fff;
  width: 260px;
  margin-left: 10px;
  position: relative;
  z-index: -1;
}

<div id="container" class="some_class">
  <div id="content" class="">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
    aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
    at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
    dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
    sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
    quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
    urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
    adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
    arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
  </div>
</div>

---

远高于解决方案仅用于视觉...在里面#content点击或悬停将不起作用...如果你想活动工作，你需要从顶部和底部放一些空间，如下所示

#container {
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  height: 200px;
  width: 300px;
  font: 13px Verdana;
  padding-top: 15px
}
.scroll {
  height: calc(100% - 15px);
  overflow-y: scroll;
}
#content {
  background: red;
  color: #fff;
  width: 260px;
  margin-left: 10px;
}

<div id="container" class="some_class">
  <div class="scroll">
    <div id="content" class="">
      <input type="text" /> Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius
      eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates
      dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae
      faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra
      ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo
      scelerisque libero massa. Sapien quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere
      metus, ornare pede montes, morbi urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla,
      purus enim amet, nascetur faucibus, adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim
      ipsum, nostra leo vestibulum quis nibh arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
    </div>
  </div>
</div>